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

概述我试图在其父母悬停时显示一个隐藏的div. 我的问题是有相同类的嵌套div,当我悬停一个“内部”div时,它的父元素也会悬停,并显示它们隐藏的子元素. HTML： <div class="a_class"> lorem ipsum <div class="inner"> <a href="">hidden...</a> </div> <div cla 我试图在其父母悬停时显示一个隐藏的div.
我的问题是有相同类的嵌套div,当我悬停一个“内部”div时,它的父元素也会悬停,并显示它们隐藏的子元素.
HTML：

<div >    lorem ipsum    <div >        <a href="">hIDden...</a>    </div>    <div >        blahblah<br />        <div >            <div >                <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吗？

提前致谢

编辑：答案
因此,除非HTML标记发生变化,否则看起来不能用纯CSS完成 – 这在我的情况下是不可能的.
我希望有一个CSS3-magic解决方案,但由于没有这样的选择,我要去JavaScript.

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

解决方法 我不认为你可以在不改变HTML结构的情况下“修复”这个问题 – 你可以有一个包含可扩展区域及其相应按钮的元素：

在这里,我添加了一个.hoverArea div. (最里面的一个不需要额外的div,因为它只包含一个.inner)

HTML

<div >    <div >        lorem ipsum        <div >            <a href="">hIDden...</a>        </div>    </div>    <div >        blahblah<br />        <div >            <div >                <a href="">hIDden...</a>            </div>            lorem ipsum        </div>    </div></div>

CSS

.hoverArea:hover > .inner{    display: block;}

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

总结

以上是内存溢出为你收集整理的html – 同一类的嵌套div,在悬停时显示child全部内容，希望文章能够帮你解决html – 同一类的嵌套div,在悬停时显示child所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。