css :hover仅影响嵌套的顶层div
css :hover仅影响嵌套的顶层div
提问于 2011-07-13 20:59:30
Hi:我得到了一些像这样的html：
<div class="class" >
<div class="class" >
</div>
</div>还有一些css，比如：
div.class:hover
{
border-width:2px;
border-style:inset;
border-color:red;
}当我将鼠标悬停在内部div上时，两个div都会显示红色边框。是否可以使用css停止传播并在内部div上显示红色边框？
谢谢。
编辑:从borrible指出的答案开始，我最终得到了：
$("div.class").mouseover(
function(e) {
e.stopPropagation();
$(this).css("border-color", "red");
}).mouseout(
function() {
$(this).css("border-color", "transparent");
});遗憾的是，它不是css，而是做了这件事。谢谢大家，我没有得到我想要的，但学到了很多新东西。堆栈溢出不是很好:)
回答 5
Stack Overflow用户
发布于 2011-07-13 21:03:43
此处的代码如下：
<div class="c">
<div class="c"></div>
</div>
.c:hover {border:solid 1px red}
.c > .c:hover {border:solid 1px green}Stack Overflow用户
发布于 2011-07-13 21:06:25
如果内部class是直接子对象，则可以使用>。如果它不是直接的子级，你可以使用space。
所以在第一种情况下是.class > class:hover { }，在第二种情况下是.class .class:hover { }
第一种情况：http://jsfiddle.net/wp4Jf/
第二种情况：http://jsfiddle.net/wp4Jf/2
请记住，>适用于ie8+
Stack Overflow用户
发布于 2017-06-03 21:15:12
老问题，但对于那些在这里登陆的人，我通过重新考虑html来使CSS变得简单，从而解决了这个问题。这解决了我在为嵌套ul/li树视图创建html/css时的问题。添加项目类div：
<div class="class" >
<div class="item">Parent</div>
<div class="class" >
<div class="item">Child</div>
</div>
</div>然后，我可以将CSS应用于" item“类，因为item不在item、...within item、...within item中，所以悬停选择器不会在节点链中层叠。因此，我在悬停时对树视图项的背景进行了着色，而没有溅起所有的父项。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6679283
复制相关文章
相似问题