在悬停时添加和删除CSS类

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');
});