Yes, you can do that, but only if #b
is after #a
in the HTML.
If #b
comes immediately after #a
: http://jsfiddle.net/u7tYE/
#a:hover + #b {
background: #ccc
}
Div A
Div B
That's using the adjacent sibling combinator (+
).
If there are other elements between #a
and #b
, you can use this: http://jsfiddle.net/u7tYE/1/
#a:hover ~ #b {
background: #ccc
}
Div A
random other elements
random other elements
random other elements
Div B
That's using the general sibling combinator (~
).
Both +
and ~
work in all modern browsers and IE7+
If #b
is a descendant of #a
, you can simply use #a:hover #b
.
ALTERNATIVE: You can use pure CSS to do this by positioning the second element before the first. The first div is first in markup, but positioned to the right or below the second. It will work as if it were a previous sibling.