On a CSS hover event can I change another div s styling

Question

When I hover over a div or class with an id of  a   can I get the background color of a div or class with the id of  b  to change

User · Answer

A pure solution without jQuery   Javascript  Head   function chbg color        document getElementById  b   style backgroundColor   color         HTML  Body    lt div id  a  onmouseover  chbg  red    onmouseout  chbg  white    gt This is element a lt  div gt   lt div id  b  gt This is element b lt  div gt    JSFiddle  http   jsfiddle net YShs2

User · Answer

This can not be done purely with css  This is a behaviour  which affects the styling of the page   With jquery you can quickly implement the behavior from your question     function           a   hover function             b   css  background-color    yellow         function            on mouseout  reset the background colour         b   css  background-color

User · Answer

The following example is based on jQuery but it can be achieved using any JS tool kit or even plain old JS    document  ready function             a   mouseover function                 b   css  background-color    red

User · Answer

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     lt div id  a  gt Div A lt  div gt   lt div id  b  gt Div B lt  div gt    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     lt div id  a  gt Div A lt  div gt   lt div gt random other elements lt  div gt   lt div gt random other elements lt  div gt   lt div gt random other elements lt  div gt   lt div id  b  gt Div B lt  div gt    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

[css] On a CSS hover event, can I change another div's styling?

Javascript (Head)

HTML (Body)

Examples related to css