添加和懸停

Question

刪除CSS類，所以我有這樣的代碼，它的工作原理：

$('.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變量。嘗試像followoing。

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