javascript - 隐藏图像并在悬停时显示文本 Jquery

Question

我有以下代码:

$(".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>

现在，我试图将鼠标悬停在每个或 li 上，我试图隐藏图像并显示文本而不是图像，然后将鼠标悬停在外面，它会返回到显示没有文字的图像。这就是我陷入困境的地方。图像更改为文本，但当我不再悬停时它仍保留在文本上，因此图像不会返回。

谁能帮忙解决这个问题吗？

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. 使用文本创建一个范围。
2. 相应地切换 img 和 span