1

我有两个 div：

<div class="outer">
    <div class="inner">Example</div>
</div>

我有一个 jQuery 函数：

$(function(){
    $('.outer').mouseout(function () {
        $('.outer).attr("style", "background-color: white");
    });

    $('.outer').mouseover(function () {
        $('.outer).attr("style", "background-color: red");
    });

    $('.inner').mouseout(function () {
        $('.inner).attr("style", "background-color: white");
    });

    $('.inner').mouseover(function () {
        $('.inner).attr("style", "background-color: red");
    });
});

当我将鼠标悬停在“外部”上时，外部的背景是红色的（好！）。当我将内部悬停时，内部和外部都是红色的……不好。

这个想法也适用于点击事件。当我向 jQuery 函数添加一些单击功能并单击内部 div 时，脚本会单击内部和外部 div。

我只希望将一个 div 设置为红色，而不是在我将鼠标悬停在内部时都设置为红色。同样对于未来，我想将此功能用于点击事件。

我认为这真的很简单，但我无法以某种方式弄清楚:(

谁能帮我？

提前致谢

4

2 回答 2

2

我认为您正在寻找stopPropagation事件方法，它：

防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

所以解决方案可以如下：

$(".inner").hover(function(e) {
    e.stopPropagation();
    $(this).attr("style", "background-color: red");
}, function(e) {
    e.stopPropagation();
    $(this).attr("style", "background-color: white");
});

演示：http: //jsfiddle.net/TZjpT/

于 2012-06-23T10:04:45.753 回答
0

@Zoltan Toth：我是手动输入的，所以我可能忘记了一些引号 :)

对于所有其他人：我关闭了 stackoverflow，并且有一个网页可能会在后台解决该问题。我没有看到它......它解决了我的问题：

（元素 = 一个 div）

 $(element).bind("click", function (event) {
     $(this).attr("style", "background-color: red");
     event.stopPropagation();
 });

带来不便敬请谅解

于 2012-06-23T10:07:28.507 回答