Question

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

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

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

我想要的是，只有鼠标指向的一个div悬停。我最好看一下CSS解决方案，但jquery也会很棒。

以下是问题的简化问题：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","");
});

Answer 2

以这种方式思考。如果你进入一个房子，而不是进入一个房间，而不是进入床，你仍然在房子里 - ＆gt;在房间里 - ＆gt;在床。你不能说你只在床上，或只在房间里。我想你明白了我的观点。如果您将鼠标悬停在CC div上hover将触发所有div因为您已经超过AA div并且bb div。最好的解决方案是使用单独的div s，而不是嵌套。像Aquillo说的那样。

Answer 3

我已经创建了一个示例，它对我有用。我为背景动画添加了jQuery和jQuery UI：

HTML：

<div class="a">
  <span>AA</span>
   <div class="b">
    <span>BB</span>
     <div class="c">
        <span>CC</span>
    </div>
</div>

CSS：

<style>

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

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

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

</style>

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>

CSS3悬停在嵌套的div上

3 个答案: