Usage: hover over to change css of another class?

Question

Is there a way to change css for one class when hovering over an element from another class using only css?

Something like:

.item:hover .wrapper { /*some css*/ } 

Only the 'wrapper' is not inside the 'item', it is somewhere else.

I really don't want to use javascript for something so simple, but if I need to, how would I do it? Here is my unsuccessful attempt:

 document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";"; 

There is only one element of each class. I don’t know why they didn’t use identifiers when they made the template, but that was exactly the case, and I can’t change it.

[change]

This is the menu. Each menu item has a separate class. When you hover over an item, a submenu appears to the right. This is like an overlay, when I use the "Inspect Element" tool, I see that the whole html site changes when the submenu is active (which means nothing but a submenu). The class that I call the "wrapper" has css that controls the background for the submenu. There really is no connection that I see between the two classes.

Answer 1

This is not possible in CSS at the moment unless you want to select a child or sibling (trivial and described in other answers here).

For all other cases, you will need JavaScript. jQuery and frameworks like Angular can handle this problem with relative ease.

[change]

With the new CSS (4) : has () selector, you can customize the target parent elements / classes, making the CSS-Only Solution available in the near future!

Answer 2

There are two approaches that you can take to influence a hovering element ( E ) another element ( F ):

• F is a child of E or
• F - an element of a later relationship (or a related descendant) E (in that E appears in the markup / DOM to F ):

To illustrate the first of these parameters ( F as a child / child of E ):

 .item:hover .wrapper { color: #fff; background-color: #000; }​ 

To demonstrate the second option, F is a sibling element in E :

 .item:hover ~ .wrapper { color: #fff; background-color: #000; }​ 

In this example, if .wrapper was a direct relative of .item (without other elements between them), you can also use .item:hover + .wrapper .

JS Fiddle demo .

Literature:

• CSS 2.1 selector, at W3.org .

Answer 3

The provided .wrapper is inside .item and provided that you are either not in IE 6 or .item is the tag, the CSS you have should work fine. Do you have evidence to suggest that this is not so?

EDIT:

Only CSS cannot affect what is not contained in it. To make this happen, format your menu like this:

 <ul class="menu"> <li class="menuitem"> <a href="destination">menu text</a> <ul class="menu"> <li class="menuitem"> <a href="destination">part of pull-out menu</a> ... etc ... 

and your CSS:

 .menu .menu { display: none; } .menu .menuitem:hover .menu { display: block; float: left; // likely need to set top & left } 

Answer 4

You can do this by executing the following CSS. you can put css here, you need to influence the child class in case of pointing to the root directory

 .root:hover .child { }