jquery - css: show div when another div is hover

Question

I've got 2 divs. Div A and Div B. If Div A is hovered, then I need show Div B. Can this be achieved with pure css only? Or if I do it in query, how do i go about with this base on the assumption that we cannot use id for these 2 divs.

Thanks

Answer 1

Assuming the two divs are contained in a div:

http://jsfiddle.net/4p8CM/1/

#container > div {
    display: none
}
#container > div:first-child {
    display: block
}
#container > div:hover + div {
    display: block
}

<div id="container">
    <div>A</div>
    <div>B</div>
</div>

The :first-child stuff is to work around this limitation that you set:

base on the assumption that we cannot use id for these 2 divs

---

If you want the second div to stay visible when you hover over it, try this:

http://jsfiddle.net/4p8CM/3/

#container > div {
    display: none
}
#container > div:first-child {
    display: block
}
#container:hover > div {
    display: block
}