добавлять и удалять класс 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'); 
}) 

Fiddle: https://jsfiddle.net/sdso2219/

Update

---

Так как вы уже упоминали, что это должно работать для динамических элементов, изменять .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

sth нравится это?

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