html - 同一类的嵌套 div，在悬停时显示子项

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;}

fiddle :http://jsfiddle.net/Nb6tD/

换句话说，我正在努力实现这一点:当我将鼠标悬停在第二个 .a_class 上时，应该只显示它​​下面的 .inner，而不是“父”.a_class 下的 .inner。

只用css可以吗？

提前致谢

编辑:答案
所以，它似乎不能用纯 css 完成，除非 html 标记发生变化——这在我的情况下是不可能的。我希望有一个 css3-magic 解决方案，但由于没有这样的选择，我要使用 javascript。

我接受了最合适的解决方案，以供将来引用，适用于所有可能更改 html 结构的解决方案。

Answer 1

我不认为你可以在不改变 html 结构的情况下“解决”这个问题——你可以用一个元素包围悬停区域及其相应的按钮:

在这里，我添加了一个.hoverArea div。 (最里面的不需要额外的 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/