Use :hover to modify the css of another class?

There are two approaches you can take, to have a hovered element affect (E) another element (F):

1. F is a child-element of E, or
2. F is a later-sibling (or sibling's descendant) element of E (in that E appears in the mark-up/DOM before F):

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

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

To demonstrate the second option, F being a sibling element of E:

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

In this example, if .wrapper was an immediate sibling of .item (with no other elements between the two) you could also use .item:hover + .wrapper.

JS Fiddle demonstration.

References:

• CSS 2.1 selectors, at the W3.org.

It's not possible in CSS at the moment, unless you want to select a child or sibling element (trivial and described in other answers here).

For all other cases you'll need JavaScript. jQuery and frameworks like Angular can tackle this problem with relative ease.

[Edit]

With the new CSS (4) selector :has(), you'll be able to target parent elements/classes, making a CSS-Only solution viable in the near future!

You can do it by making the following CSS. you can put here the css you need to affect child class in case of hover on the root

.root:hover    .child {   }