This is possible to trigger css rules for an hover on one element that will affect another.
One example for this is hovering over a parent Div and changing background color for one of its inner elements.
This is possible only if #b is after #a in the HTML:
If #b comes immediately after #a:
|
1 2 3 4 5 6 |
#a:hover + #b { background: red; } <div id="a">Div A</div> <div id="b">Div B</div> |
adjacent sibling combinator (+).
If there are other elements between #a and #b :
|
1 2 3 4 5 6 7 8 9 |
#a:hover ~ #b { background: red; } <div id="a">Div A</div> <div>random other elements</div> <div>random other elements</div> <div>random other elements</div> <div id="b">Div B</div> |
general sibling combinator (~).
Both + and ~ work in all modern browsers.
If #b is a descendant of #a, you can simply use #a:hover #b.
For elements which have no sibling / child relations a JavaScript based solution is required.