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();
});

<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

Solution 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>

Solution 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.