How To Do Multiple Hover On List

Question

Alright so i wanted to know how i can select multiple items on hover for example when i hover on list a Highlight a and on list b, give that list box shadow. ive tried to code it but for some reason im not able to do the multiple hover effect.

CSS Code:

#a:hover ~ #b {
    background: #ccc
}

HTML Code:

<div><ul id="a"><li>Div A</li></ul></div>
<div>random elements</div>
<div>random elements</div>
<div>random elements</div>
<div><ul id="b"><li>Div B</li></ul></div>

Answer 1

The tilde ~ is for siblings.

But #b is not a sibling for #a

Change the id and it will work : (http://jsbin.com/AxUzOX/1/edit)

<div id="a">
    <ul >
        <li>Div A</li>
    </ul>
</div>
<div>
    random elements
</div>
<div>
    random elements
</div>
<div>
    random elements
</div>
<div id="b">
    <ul >
        <li>Div B</li>
    </ul>
</div>

here is the jquery solution if you want http://jsbin.com/AxUzOX/4/edit