2

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

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

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

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

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

4

3 回答 3

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","");
});
于 2013-10-26T19:50:45.507 回答
0

这样想。如果你进入房子，而不是进入房间，而不是进入床，你仍然在房子里-> 在房间里-> 在床上。你不能说你只在床上，或者只在房间里。我想你明白我的意思。如果您将鼠标悬停在 theCC div上，hover将触发所有divs，因为您已经在AA div和 上bb div。最好的解决方案是使用单独div的 s，而不是嵌套的。正如阿奎洛所说。

于 2013-05-15T08:42:15.547 回答
0

我创建了一个示例，它对我有用。我为背景动画添加了 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>
于 2013-05-15T08:52:00.073 回答