在懸停時添加和刪除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');
});