Question

所以我有这个代码，它可以工作：

$('.col-main').on('mouseenter', '.product-wrapper', function () {
  $( this ).addClass( "js-hover" );
});
$('.col-main').on('mouseleave', '.product-wrapper', function () {
  $( this ).removeClass( "js-hover" );
});

但我希望它更优雅一点。像这样：

listContainer.on( {
  mouseenter: function() {
    $( this ).addClass( "js-hover" );
    console.log( "hoooover" );
  },
  mouseleave: function() {
    $( this ).removeClass( "js-hover" );
  }
}, productWrapper );

但是我无法让它工作:)感谢任何帮助

Answer 1

jQuery悬停和切换功能可能对您有用。

$('.element-selector').hover(function(){   
  $(this).toggleClass('.class-to-toggle');
}, function(){
  $(this).toggleClass('.class-to-toggle');
})

小提琴：https://jsfiddle.net/sdso2219/

更新

由于您现在已经提到过这需要适用于动态元素，因此请将.hover修改为.live，例如：

$('.element-selector').live('mouseenter', function(){   
  $(this).toggleClass('.class-to-toggle');
}).live('mouseleave', function(){
  $(this).toggleClass('.class-to-toggle');
})

Answer 2

我认为问题出在productWrapper变量上。尝试跟进。

var listContainer=$('.col-main')
var productWrapper='.product-wrapper';

listContainer.on( {
    mouseenter: function() {
        $( this ).addClass( "js-hover" );
        console.log( "hoooover" );
    },
    mouseleave: function() {
        $( this ).removeClass( "js-hover" );
   }
}, productWrapper );

Answer 3

这样吗？

$('.col-main').on('mouseenter mouseleave', '.product-wrapper', function (e) {
    $( this ).toggleClass( 'js-hover', e.type === 'mouseenter');
});

在悬停时添加和删除css类

3 个答案: