Css pseudo-class hovering over one element changes properties in another element

Question

I was wondering how I can create css pseudo-classes, namely, move the mouse cursor over an element, for example a div with id, the properties of another div with identifier change?

so usually it will be:

#3dstack:hover { listed properties } 

I'm not sure what change would have put it on a div with id 3dstack and changed it to another div.

Answer 1

I do not think that this is possible if only the element you want to change is not a descendant or a native element of the hanging 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 for this:

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

See the differences here.

Answer 2

This is not possible with CSS. You will need to use a JavaScript event handler. For example with jQuery hover :

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

• Demo

Answer 3

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