html – 同一类的嵌套div,在悬停时显示child
发布时间:2020-12-14 22:29:45 所属栏目:资源 来源:网络整理
导读:我试图在其父母悬停时显示一个隐藏的div. 我的问题是有相同类的嵌套div,当我悬停一个“内部”div时,它的父元素也会悬停,并显示它们隐藏的子元素. HTML: div class="a_class" lorem ipsum div class="inner" a href=""hidden.../a /div div class="b_class"
我试图在其父母悬停时显示一个隐藏的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吗? 提前致谢 编辑:答案 我接受了最合适的解决方案,以备将来参考,因为那里有可能改变html结构. 解决方法
我不认为你可以在不改变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/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |