html - CSS :hover only affect top div of nest

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

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}