0

我已将 mouseenter 效果应用于 div。当您输入 div 时，它会为另一个 div 设置动画。问题是，mouseenter 效果也适用于子 div。如何将效果仅应用于父 div，但为子 div 设置动画？

JS：

$(document).ready(function() {
  $('#slideleft').mouseenter(function() {
    var $lefty = $(this).children();
      $lefty.stop().animate({ 
        left: "0px",
  top: "0px"
             }, 400 );
  });
  $('#slideleft').mouseleave(function() {
    var $lefty = $(this).children();
      $lefty.stop().animate({ 
        left: "-700px",
  top: "200px"
             }, 400 );
  });

});

HTML

<div id="slideleft" class="slide"> 

  <div class="inner">Animate this element's left style property</div> 
</div> 



    </div>
4

3 回答 3

2

要仅将动画应用于外部 div，您可以检查事件的目标以确保它与您在 jQuery 方法中选择的 div 匹配。 http://docs.jquery.com/Events/jQuery.Event#event.target

这是您的代码的样子：

$(document).ready(function() {
  $('#slideleft').mouseenter(function(event) {  // added 'event' as param name
        if ( this == event.target )             // ADD THIS LINE
        {
            var $lefty = $(this).children();
            $lefty.stop().animate({
                                    left: "0px",
                                    top: "0px"
                                  }, 400 );
        }
  });

  $('#slideleft').mouseleave(function(event) {
      // uncomment the below IF statement, if you only want to hide
      //  the inner div when mousing out of the outer div.
      // Otherwise the code as is will hide your div if you mouse out of either
      //  the outer or the inner div

      //if ( this == event.target )
      //{
        var $lefty = $(this).children();
        $lefty.stop().animate({
                                left: "-700px",
                                top: "200px"
                              }, 400 );
      //}
  });

});

PS：您的示例 HTML 中有一个额外的结束 DIV 标记，这是不必要的。

于 2009-12-10T21:45:45.787 回答
1

您可以通过不使用它们并在主 div 上使用jQuery .hover()函数来避免孩子触发 mouseenter/mouseout 事件。

jQuery('#slideleft').hover(
        function() {
                // mouse over function
        },
        function() {
                // mouse leave function
        }
);
于 2009-12-10T20:37:32.907 回答
0

像这样对孩子使用“stopPropagation”：

$('#slideleft *').mouseenter(function(event) {        <---- note the asterisk selector
 event.stopPropagation();                        <---- this line
});

这可以防止每个子级的 mouseenter 事件传播到父级。这是它的文档：

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

PS在stackoverflow中礼貌很重要。如果我在您上面的一些回答中正确地解释了一些模棱两可的语气，那么您将来可能需要更多地考虑您的话;-), :-)

于 2009-12-10T21:17:14.517 回答