Question

我有2个div，一个div（div2）用作覆盖，当鼠标悬停在第一个div（div1）上时必须触发。但是当我仍然在div（1）中移动我的鼠标时，另一个div（div2）继续触发。我尝试在我的动画功能之前添加一个停止但它似乎不起作用。还有另一种方法可以阻止我的div（div2）触发吗？继承了我的jQuery代码：

jQuery('.Mainbutton_hoverwrapper').promise().done(function(){
    jQuery('.Mainbutton_hoverwrapper').mouseover(function() {
        console.log(jQuery(this).find( '.fusion-button-wrapper' ).width());
         jQuery(this).find( '.fusion-button-wrapper' ).css('left', '-' + jQuery(this).width()*2 + 'px');
         jQuery(this).find( '.Mainbutton_hover' ).css('display', 'block');
        jQuery(this).find( '.fusion-button-wrapper' ).stop( true, true ).animate({left:'0px'});
      })
      .mouseout(function() {
        jQuery(this).find( '.Mainbutton_hover' ).css('display', 'none');
        jQuery(this).find( '.fusion-button-wrapper' ).stop( true, true ).animate({left: '-' + jQuery(this).width()*2 + 'px'});
      });
});

当执行一次时，动画本身就能正常工作。

编辑：我尝试了mouseenter但是当我移动我的鼠标时，div2再次消失。奇怪的行为。

编辑代码：

jQuery('.Mainbutton_hoverwrapper').mouseenter(function() {
        console.log(jQuery(this).find( '.fusion-button-wrapper' ).width());
         jQuery(this).find( '.fusion-button-wrapper' ).css('left', '-' + jQuery(this).width()*2 + 'px');
         jQuery(this).find( '.Mainbutton_hover' ).css('display', 'block');
        jQuery(this).find( '.fusion-button-wrapper' ).stop( true, true ).animate({left:'0px'});
      })
      .mouseout(function() {
        jQuery(this).find( '.Mainbutton_hover' ).css('display', 'none');
        jQuery(this).find( '.fusion-button-wrapper' ).stop( true, true ).animate({left: '-' + jQuery(this).width()*2 + 'px'});
      });

Mouseover一直在触发jQuery

0 个答案: