Selecting an element inside of the hovered "li" tag

I have a few <li> tags and I开发者_如何学Go need to hide an element inside of the hovered <li>tag. The following code is not working, please let me know how can I get it worked...

$(function(){
  $("#deals ul li").hover(function(){
     $(this:has(".transform")).hide();
  });
});

Thanks.

this is a DOM element. You can't combine it with jQuery selectors or strings to try to find an element. $(this) is a jQuery selection containing the element hovered. You probably need to use find to get the element you want:

$(function(){
  $("#deals ul li").hover(function(){
     $(this).find(".transform")).hide();
  });
});

I think you may also want the mouseenter event, rather than hover, if you are only binding a handler for the time when the mouse hovers over the element, rather than when it leaves it too.

Replace:

$(this:has(".transform")).hide();

With:

$(this).find(".transform")).hide();