CSS3 悬停在嵌套的 div 上

Question

我有多层嵌套 div。每个 div 中都有一个 span。

<div>
    <span>AA</span>
    <div>
        <span>BB</span>
        <div>
            <span>CC</span>
        </div>
    </div>
</div>

如果我悬停在一个 div 上，则 span CSS 应该有另一个背景。这工作得很好，只要我将鼠标悬停在最外面的 div 上，包含 AA 跨度。但问题是，如果我将包含 BB 跨度的中间 div 悬停，则外部 div 也会悬停。如果我将鼠标悬停在 CC 跨度 div 上，所有三个跨度都会获得背景。

我想要的是，只有鼠标指向的一个 div 悬停。我更喜欢寻找 CSS 解决方案，但 jQUery 也很棒。

这是问题的简化 jsfiddle:http://jsfiddle.net/FufRg/

Answer 1

在 jquery 中这很容易。只是停止传播。 jsFiddle

$("div").on("mouseover",function(e){
    $(this).children("span").css("background","#AAA");
    e.stopPropagation();
});
$("div").on("mouseout",function(){
    $(this).children("span").css("background","");
});