同一类的嵌套div,在悬停时显示child

Question

我试图在其父母悬停时显示一个隐藏的div.
我的问题是有相同类的嵌套div,当我悬停一个"内部"div时,它的父元素也会悬停,并显示它们隐藏的子元素.
HTML:

<div class="a_class">
    lorem ipsum
    <div class="inner">
        <a href="">hidden...</a>
    </div>
    <div class="b_class">
        blahblah<br />
        <div class="a_class">
            <div class="inner">
                <a href="">hidden...</a>
            </div>
            lorem ipsum
        </div>
    </div>
</div>

CSS:

.inner{display:none;}
.a_class:hover > .inner{display: block;}

小提琴:http://jsfiddle.net/Nb6tD/

换句话说,我试图实现这一点:当我将鼠标悬停在第二个.a_class上时,只有它下面的.inner应该显示,而不是"父".a_class下的.inner.

它只能用css吗？

提前致谢

编辑:答案
所以,看起来它不能用纯css完成,除非html标记改变 - 这在我的情况下是不可能的.我希望有一个css3-magic解决方案,但由于没有这样的选择,我要去javascript.

我接受了最合适的解决方案,以备将来参考,因为那里有可能改变html结构.

Answer 1

我不认为你可以在不改变html结构的情况下"修复"这个问题 - 你可以有一个包含可扩展区域及其相应按钮的元素:

在这里,我添加了一个.hoverAreadiv.(最内层的不需要额外的div,因为它只包含一个.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;
}

演示http://jsfiddle.net/Nb6tD/7/