Nested divs of same class, show child on hover
I don't think you can "fix" this without changing the html structure - you could have an element enclosing the hoverable area and its corresponding button:
Here, i've added a .hoverArea
div. (Extra div not needed on the innermost one, as it only contains a single .inner
)
html
<div class="a_class">
<div class="hoverArea">
lorem ipsum
<div class="inner">
<a href="">hidden...</a>
</div>
</div>
<div class="b_class">
blahblah<br />
<div class="a_class hoverArea">
<div class="inner">
<a href="">hidden...</a>
</div>
lorem ipsum
</div>
</div>
</div>
css
.hoverArea:hover > .inner{
display: block;
}
Demo at http://jsfiddle.net/Nb6tD/7/