Make image in sheet fade with freeze using jQuery

Question

Trying to make img in li to hide when the mouse hovers over an element and shows the mouse element once. Later, I want the paragraph to display the class name li instead of the image, but now I want to focus on hiding the image.

I have been doing this for some time, and I can’t understand what’s wrong, even looking at other posts related to this.

 <ul id="language"> <li class="a"><img src="img/a.png" alt="a"></li> <li class="b"><img src="img/b.png" alt="b"></li> </ul> <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="nameDisplay.js" type = "text/javascript" charset="utf-8"></script> 

In nameDisplay.js

 $('#language li').hover(function(){ $(this 'img').hide(); }, function(){ $(this 'img').show(); }); 

Answer 1

Just use css, no need to use jQuery

 #language li:hover img{ display: none; } 

Answer 2

 $(function() { $('#language li').hover(function() { $('img', this).hide(); // You can either of these // $(this).find('img') // $(this).children('img') }, function() { $('img', this).show(); }); }); 

 <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <ul id="language"> <li class="a"> <img src="img/a.png" alt="a"> </li> <li class="b"> <img src="img/b.png" alt="b"> </li> </ul> 

Your image search selector is incorrect. You can use the context selector or the .find() or children() method

 $(function() { $('#language li').hover(function(){ $('img', this).hide(); // You can either of these // $(this).find('img') // $(this).children('img') }, function(){ $('img', this).show(); }); });