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
}

Answer 2

Please note that I've used element ids in these examples to identify which, specific, elements are used. In place of ids you could use almost any other CSS-selector, the important thing is the relationships between the selected elements; in the first example I've used the adjacent-sibling selector, and in the latter the descendant selector.

If you post your mark-up, and notify me with a comment, I'll try and revise the selectors to match what you're working with. Otherwise this is just a generic best-guess. And they're not always that useful...

That said, the answers appear below:

If you've got super-simple mark-up then this can be accomplished via CSS:

#divB {
    display: none;
}

#divA:hover + #divB {
    display:  block;
}

<div id="divA">
    Some content in 'divA'
</div>
<div id="divB">
    Some content in 'divB'
</div>

JS Fiddle demo. Or:

#divB {
    display: none;
}

#divA:hover #divB {
    display:  block;
}

<div id="divA">
    Some content in 'divA'
    <div id="divB">
        Some content in 'divB'
    </div>
</div>

JS Fiddle demo.

Answer 3

If you add a container to div A and div B you can do it very easy in this way:

<style>
/* Only for testing */
.a, .b {
    border: 1px solid black;
}
/* Hide the B div */
.b {
    display:none;
}
/* Show the B div when hover on A (the container include only A when B is not displayed */
.container:hover .b {
    display: block;
}
</style>
<div class="container">
    <div class="a">A</div>
    <div class="b">B</div>
</div>

http://jsfiddle.net/royshoa/bzhz8pou/