Apply css rules to other elements

Question

I don't think there is a current SO question addressing this; but if there is please point me to it and I'll close this one.

Anyways, suppose html like this:

<div>
  <div class="a" style="float:left;"></div>
  <div class="b" style="float:left;"></div>
  <div class="c" style="float:left;"></div>
  <div style="clear:both;"></div>
</div>

Is there any css rules I can define which alter the styles of the OTHER elements when hovering. So, something like

  .a:hover {
     // change bg colors of .b and .c
  }

I know I can do this with hover events in javascript; but I was hoping for a css only solution. If you can point to some part of the css spec that says this is NOT possible then I will still mark that as an answer. (Even though I'll admit I didn't read the whole thing; I did read some of it).

EDIT: The answers everyone marked seemm to work and are the correct answer; but they don't work in Chrome/Safari (but IE8 is fine...go figure :P). See here: Why doesn't this CSS selector work: a:hover ~ span?

score 3 · Accepted Answer · answered May 07 '11 at 06:24

3

Is there any css rules I can define which alter the styles of the OTHER elements when hovering

You can use adjacent sibling selectors in this case (since b and c follow a).

.a:hover + .b,
.a:hover + .b + .c { }

You could also use the general sibling combinator from CSS 3

.a:hover ~ div {}

Although this still has the requirement that the element you are hovering is first.

I know I can do this with click events in javascr

mouseover events would make more sense

If you can point to some part of the css spec that says this is NOT possible

Specifications tell you what is possible. They rarely state what can't be done (since providing an exhaustive list of what isn't possible would make all specifications huge)

answered May 07 '11 at 06:24

Quentin

914,110
126
1,211
1,335

1

WebKit is known to have problems with `:hover` and `~`. I'm not sure if this is fixed yet in the latest Safari and Chrome builds though. http://stackoverflow.com/questions/5061509/why-doesnt-this-css-selector-work-ahover-span – BoltClock May 07 '11 at 06:30
Anything labeled with CSS 3 should be considered to have problems in lots of browsers for the time being :) – Quentin May 07 '11 at 06:36
You're absolutely right about the hover event and not click event in JavaScript. It was late when I posted. Thanks for the thorough answer. – Dave May 07 '11 at 17:10
Marking as answer; but @BoltClock was right. This doesn't work in Chrome and Safari. The question he linked to explains. – Dave May 07 '11 at 17:33

score 1 · Answer 2 · answered May 07 '11 at 06:25

1

Use this:

.a:hover + .b,
.a:hover + .b + .c,
{
    // styles of .b and .c
}

More on sibling combinators: http://www.w3.org/TR/css3-selectors/#sibling-combinators

answered May 07 '11 at 06:25

c-smile

26,734
7
59
86

score 1 · Answer 3 · answered May 07 '11 at 06:25

1

Myabe it will help you a bit:

.a:hover + .b {
     background-color:red;
 }
.a:hover + .b + .c {
    background-color:red;
 }

Watch results: http://jsfiddle.net/uNZSX/

answered May 07 '11 at 06:25

Marcin

1,429
8
16

Apply css rules to other elements

3 Answers3