add and remove css class on hover

Question

So I have this code and it works:

$('.col-main').on('mouseenter', '.product-wrapper', function () {
  $( this ).addClass( "js-hover" );
});
$('.col-main').on('mouseleave', '.product-wrapper', function () {
  $( this ).removeClass( "js-hover" );
});

But I want it to be a bit more elegant. Something like this:

listContainer.on( {
  mouseenter: function() {
    $( this ).addClass( "js-hover" );
    console.log( "hoooover" );
  },
  mouseleave: function() {
    $( this ).removeClass( "js-hover" );
  }
}, productWrapper );

But I can´t get it to work :) Any help is appreciated

Answer 1

The jQuery hover and toggle functions could be useful to you.

$('.element-selector').hover(function(){   
  $(this).toggleClass('.class-to-toggle');
}, function(){
  $(this).toggleClass('.class-to-toggle');
})

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

Update

---

Since you have now mentioned that this needs to work for dynamic elements, modify the .hover to .live, eg:

$('.element-selector').live('mouseenter', function(){   
  $(this).toggleClass('.class-to-toggle');
}).live('mouseleave', function(){
  $(this).toggleClass('.class-to-toggle');
})

Answer 2

I think the problem is with productWrapper variable. Try like 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

sth like this?

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