Question

I referred to this post to make my hover work. But solution there is not working for me.

I have HTML like

<div id="top">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
    <div id="hiddentext">1st div is hovered</div>
</div>
</div>

I have big css file…you can see the fiddle here

Can anyone help me getting my hiddentext visible on hover of “first” div.
​

Answer 1

Write like this

#first:hover + #second + #third > #hiddentext{
    visibility:visible;
}

Check this http://jsfiddle.net/Q5zt2/17/

Updated

write like this:

#first:hover ~ #third #hiddentext{
    visibility:visible;
}

Check this

http://jsfiddle.net/Q5zt2/20/