添加和悬停

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