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/

Tags:

Html

Css