css pseudo class, hover on one element changes properties in different element

Question

I was wondering how I could set up css pseudo classes, specifically hover so when I hover over an element, like a div with an id, the properties of a different div with an id get changed?

so normally it would be this:

#3dstack:hover {
  listed properties
}

I'm not sure what the change would be to have it hover on div with the id 3dstack and have it change another div.

Answer 1

I do not think that is possible unless the element you want to change the properties of is a descendent or a sibling of the hovered element, in which case you can do:

#myElement:hover #myElementDescendent {
    background-color: blue;
}

/*or*/

#myElement:hover + #myElementSibling {
    background-color: blue;
}

Of course you can always use jquery to do this:

$("#anelement").hover(
    function() {
        $("otherelement").css("background-color", "blue");
    });

See the differences here

Answer 2

This is not possible with CSS alone. You'll have to use a JavaScript event handler. For example, with jQuery's hover:

​$('#3dstack').hover(function() {
    $('#otherID').toggleClass('properties');    
});​​​​​​​

• DEMO

Answer 3

Visually you can do this using LESS, but under the hood it's actually using JavaScript.