CSS3悬停在嵌套的div上

我有多个嵌套div。每个div都有一个跨度

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

AA
BB
科科斯群岛

如果我将鼠标悬停在div上，css将获得另一个背景。只要我将鼠标悬停在最外层的div上，包含AA跨距，这就可以很好地工作。 但问题是，如果我悬停在中间的div上，包含BB跨度，那么外部div也会悬停。如果我将CC span div悬停，所有三个span都将获得背景

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

---

下面是一个简化的JSF问题：

以这种方式思考。如果你进入一所房子，比进入一个房间，比进入床你仍然在房子->在房间->在床上。你不能说你只是在床上，或者只是在房间里。我想你明白我的意思了。如果您将鼠标悬停在

CC

div

上，则

悬停将在所有
div
上触发，因为您已经在
AA
div
和
bb
div
上。最好的解决方案是使用单独的
div
s，而不是嵌套的。正如阿奎罗所说。
我已经创建了一个示例，它对我很有用。我为背景动画添加了jQuery和jQuery UI：

HTML:


AA
BB
科科斯群岛


CSS:


.a{宽度：400px；
高度：400px；
背景：#000；}
.b{宽度：300px；
高度：300px；
背景：#ddd；}
.c{宽度：200px；
高度：200px；
背景：#efee；}

jQuery：

<script>
$(document).ready(function(){


$('.a').hover(function(){

    $(this).find('*').animate({'backgroundColor': 'red'},400);

});

$('.b').hover(function(){

    $(this).find('*').animate({'backgroundColor': 'blue'},400);

});

$('.c').hover(function(){

    $(this).find('*').animate({'backgroundColor': 'yellow'},400);

});

});
</script>


$（文档）.ready（函数（）{
$（'.a'）.hover（函数（）{
$（this.find（'*'）.animate（{'backgroundColor'：'red'}，400）；
});
$（'.b'）。悬停（函数（）{
$（this.find（'*'）.animate（{'backgroundColor'：'blue'}，400）；
});
$（'.c'）.hover（函数（）{
$（this.find（'*'）.animate（{'backgroundColor'：'yellow'}，400）；
});
});
在jquery中，这很简单。停止传播。

是否可以选择使用3个独立的div而不是嵌套的div？
<style>

    .a{width: 400px;
         height: 400px;
         background: #000;}

    .b{width: 300px;
         height: 300px;
         background: #ddd;}

    .c{width: 200px;
         height: 200px;
         background: #efefee;}

</style>

<script>
$(document).ready(function(){


$('.a').hover(function(){

    $(this).find('*').animate({'backgroundColor': 'red'},400);

});

$('.b').hover(function(){

    $(this).find('*').animate({'backgroundColor': 'blue'},400);

});

$('.c').hover(function(){

    $(this).find('*').animate({'backgroundColor': 'yellow'},400);

});

});
</script>

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