css visibility not changing on hover event

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.

sandeep · Accepted Answer · 2012-02-16 07:38:20Z

2

Write like this

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

Updated

write like this:

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

Check this

answered Feb 16, 2012 at 6:52

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Thats great. Thanks a ton. But why? and how come?

because you define + selector wrongly check this w3.org/TR/CSS2/selector.html#adjacent-selectors

Two questions: why are #first and #second are needed there? and Is there a better way to achieve the same functionality using css only?

for your second question check jsfiddle.net/Q5zt2/20 for your second question check & read the link of w3c which i give you.

@NewAlexandria the HTMl structure is same as above check this jsbin.com/ajeyub/1

|