css:悬停只影响巢的顶部div

Question

嗨:得到一些像:

<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上获得红色边框？

谢谢.

编辑:从可怕的答案开始,我最终得到:

    $("div.class").mouseover(
        function(e) {
            e.stopPropagation();
            $(this).css("border-color", "red");
        }).mouseout(
        function() {
            $(this).css("border-color", "transparent");
        });

遗憾的是,这不是css,而是完成工作.谢谢大家,没有得到我想要的但是学到了很多新东西.堆栈溢出不是很好:)

Answer 1

以下选择器应停止悬停事件的传播。

div.class:not(:has(div.class:hover)):hover

它只选择那些悬停在其上的具有 class 类的 div，这些 div 没有子级，该 div 具有也悬停在其上的 class 类。

所以基本上你将鼠标悬停在一个孩子上，父母不会被选择（或者换句话说，你停止传播）

唯一的缺点是，浏览器对:has()伪类的支持还不是那么好（尤其是旧版本） - 但我想我们进入未来越远，这个问题就会变得越小。

Answer 2

看看http://jsfiddle.net/n6rzA/

那里的代码:

<div class="c">
    <div class="c"></div>
</div>

.c:hover {border:solid 1px red}
.c > .c:hover {border:solid 1px green}

Answer 3

如果内心class是直接的孩子,你可以使用>.如果它不是直接的孩子,你可以使用空间.

所以在第一种情况下.class > class:hover { },在第二种情况下.class .class:hover { }

第一个案例:http://jsfiddle.net/wp4Jf/

第二种情况:http://jsfiddle.net/wp4Jf/2

请记住,>适用于ie8 +