Question

I have the following script which animates a background image sprite on my navigation items:

$j(function() {
   $j(".menu-item:not(.current-menu-item) .bottom_nav").hover( function () {
      $j(this).animate( {
         backgroundPosition : '0px 35px'}
      , 300); }
   , function () {
      $j(this).animate( {
         backgroundPosition : '0px 0px'}
      , 600); }
   ); 
});

I would now like to exclude a second class from the hover script. I have tried adding it in the form:

$j(".menu-item:not(.current-menu-item, .current-menu-parent) .bottom_nav").hover( function () {

and

$j(".menu-item:not('.current-menu-item, .current-menu-parent') .bottom_nav").hover( function () {

But both break the hover script.

Answer 1

jQuery .not()/:not selector documentation –

The .not() method will end up providing you with more readable
selections than pushing complex selectors or variables into a :not()
selector filter. In most cases, it is a better choice.

$j(".menu-item").not(".current-menu-item,.current-menu-parent").find(".bottom_nav").hover()