Hide Image And Show Text On Hover Jquery

I have the following code: 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

Solution 1:

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

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

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

Solution 2:

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

ullia:hoverimg {
  display: none
}

ullia:hoverspan {
  display: block
}

ulliaimg {
  display: block
}

ulliaspan {
  display: none
}

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

Solution 3:

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

Example Snippet:

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

<ulid="servicesNav"><liclass="servSep"><aclass="service-link"data-text="Name A"href="#"><imgid="serv-image-1"class="image-tag"src="content/images/serv-1.png" /><span>SomeText</span></a></li><liclass="servSep"><aclass="service-link"data-text="Name A"href="#"><imgid="serv-image-8"class="image-tag"src="content/images/serv-8.png" /><span>SomeText</span></a></li><liclass="servSep"><aclass="service-link"data-text="Name C"href="#"><imgid="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.