jQuery mouseenter/mouseleave doesn't work

Question

I'm using an anchor tag with an image as a hyperlink and I would like the image also to change on mouseover/mouseleave. The hyperlink works but the mouse/image change bit doesn't.

Here is the jQuery code:

jQuery('document').on({
  mouseenter: function() {
    jQuery(this).find('img').attr('src','/templates/beez_20/images/e2tw/check_cross_hilite.png');
  },
  mouseleave: function() {
    jQuery(this).find('img').attr('src','/templates/beez_20/images/e2tw/check_cross_trans.png');
  }
}, 'p#title');

The surprising thing for me is that very similar jQuery code on the same page is working OK. Any help would be much appreciated.

Answer 1

it should be jQuery(document) not jQuery('document') as 'document' refers a element selector which will look for an element with tagname document like <document>...</document>

jQuery(document).on({
  mouseenter: function() {
    jQuery(this).find('img').attr('src','/templates/beez_20/images/e2tw/check_cross_hilite.png');
  },
  mouseleave: function() {
    jQuery(this).find('img').attr('src','/templates/beez_20/images/e2tw/check_cross_trans.png');
  }
}, 'p#title');

Answer 2

try this remove single quote from document.

jQuery(document).on({
  mouseenter: function() {
    jQuery(this).find('img').attr('src','/templates/beez_20/images/e2tw/check_cross_hilite.png');
  },
  mouseleave: function() {
    jQuery(this).find('img').attr('src','/templates/beez_20/images/e2tw/check_cross_trans.png');
  }
}, 'p#title');

.ready()