隐藏图像并在悬停Jquery上显示文本

Question

I have the following code:

 $(".service-link").mouseover(function () { $(this).find('img:first').hide(); var txt = $(this).attr("data-text"); $(this).text(txt); }).mouseout(function () { $(this).text(); $(this).find('img:first').show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="servicesNav"> <li class="servSep"><a class="service-link" data-text="Name A" href="#"><img id="serv-image-1" src="content/images/serv-1.png" /></a></li> <li class="servSep"><a class="service-link" data-text="Name A" href="#"><img id="serv-image-8" src="content/images/serv-8.png" /></a></li> <li class="servSep"><a class="service-link" data-text="Name C" href="#"><img id="serv-image-3" src="content/images/serv-3.png" /></a></li> </ul> 

Now what I'm trying to do it on hovering on each or the li , I am trying to hide the image and show a text instead of the image and on hover out it goes back to show the image without the text. This is where I get stuck. The image changes to the text but it stays on the text when I'm not hovering anymore, so the image doesn't come back.

Can anyone help on this?

Answer 1

 $(".service-link").mouseover(function() { $(this).find('img').toggle(); $(this).find('span').toggle(); }).mouseout(function() { $(this).find('img').toggle(); $(this).find('span').toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="servicesNav"> <li class="servSep"> <a class="service-link" data-text="Name A" href="#"> <img id="serv-image-1" src="content/images/serv-1.png" /> <span style="display:none">Name A</span> </a> </li> <li class="servSep"> <a class="service-link" data-text="Name A" href="#"> <img id="serv-image-8" src="content/images/serv-8.png" /> <span style="display:none">Name B</span> </a> </li> <li class="servSep"> <a class="service-link" data-text="Name C" href="#"> <img id="serv-image-3" src="content/images/serv-3.png" /> <span style="display:none">Name C</span> </a> </li> </ul> 

1. Create a span with the text.
2. Toggle both img and span accordingly

Answer 2

You can simply use css to do that. No need js.

 ul li a:hover img { display: none } ul li a:hover span { display: block } ul li a img { display: block } ul li a span { display: none } 

 <ul id="servicesNav"> <li class="servSep"><a class="service-link" data-text="Name A" href="#"><span>Name A</span><img id="serv-image-1" src="content/images/serv-1.png" /></a></li> <li class="servSep"><a class="service-link" data-text="Name B" href="#"><span>Name B</span><img id="serv-image-8" src="content/images/serv-8.png" /></a></li> <li class="servSep"><a class="service-link" data-text="Name C" href="#"><span>Name C</span><img id="serv-image-3" src="content/images/serv-3.png" /></a></li> </ul> 

Answer 3

It can be achieved by just using css. Toggle display property on hover of parent.

Example Snippet:

 #servicesNav .servSep span { display: none; } #servicesNav .servSep:hover span { display: inline; } #servicesNav .servSep:hover .image-tag { display: none; } 

 <ul id="servicesNav"> <li class="servSep"> <a class="service-link" data-text="Name A" href="#"> <img id="serv-image-1" class="image-tag" src="content/images/serv-1.png" /> <span>SomeText</span> </a> </li> <li class="servSep"> <a class="service-link" data-text="Name A" href="#"> <img id="serv-image-8" class="image-tag" src="content/images/serv-8.png" /> <span>SomeText</span> </a> </li> <li class="servSep"> <a class="service-link" data-text="Name C" href="#"> <img id="serv-image-3" class="image-tag" src="content/images/serv-3.png" /> <span>SomeText</span> </a> </li> </ul> 

Note: Use jQuery or css whichever you find more comfortable.