Question

你好我的代码工作正常，但我不希望它在#stem和#case悬停时触发......因为它们是动画的一部分......（它们绝对位于div_mainGraphic上）。有人有主意吗？谢谢！

$('#div_mainGraphic').live("mouseenter mouseleave", function(event){
    if (event.type == 'mouseenter') {
        $('#stem').animate({"top": "-=35px"}, 500);
    } else {
        $('#stem').animate({"top": "+=35px"}, 150);
    }
});

是正在运行的代码，我正在考虑做这样的事情：

$('#div_mainGraphic').live("mouseenter mouseleave", function(event){
    if (event.type == 'mouseenter') {
        $('#stem').animate({"top": "-=35px"}, 500);
    }
    if (event.type == 'mouseleave') {
        $('#stem').animate({"top": "+=35px"}, 150);
    }
    if (event.location == '???') {
        ???
    }
});

这是HTML：

<div id="div_mainGraphic">
</div>
<img src="/images/img_stem.png" id="stem" />
<img src="/images/img_case.png" id="case" />

Answer 1

尝试使用您的代码，这基本上会在悬停时停止事件传播。

$("#stem,  #case").hover(function(e){
   e.stopPropagation();
});

使用您的此代码

$('#div_mainGraphic').live("mouseenter mouseleave", function(event){
    if (event.type == 'mouseenter') {
        $('#stem').animate({"top": "-=35px"}, 500);
    } else {
        $('#stem').animate({"top": "+=35px"}, 150);
    }
});

或者您也可以尝试将#stem和#case元素移动到#div_mainGraphic中，因为它们是绝对定位的元素。

Answer 2

我的代码中绝对简单易读的解决方案：

$('.free').live('mouseenter', function() {
  $(this).find('.alert').fadeIn(200);
});

$('.free').live('mouseleave', function() {
  $(this).find('.alert').fadeOut(200);
});

jQuery - 有例外的实时mouseenter和mouseleave

2 个答案: