css :hover 只影响 nest 的顶部 div

Question

嗨：有一些像这样的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，但可以完成工作。谢谢大家，没有得到我想要的，但学到了很多新东西。堆栈溢出不是很好 :)

原文由 Patrick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 imsky 发布，翻译遵循 CC BY-SA 3.0 许可协议