隐藏图像并在悬停Jquery上显示文本 [英] Hide image and show text on hover Jquery

问题描述

我有以下代码:

$(".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上时，我正在尝试执行的操作是，我试图隐藏图像并显示文本而不是图像，并且在悬停时它又返回以显示图像而没有文本.这就是我卡住的地方.图像更改为文本，但是当我不再悬停时，它将保留在文本上，因此图像不会再出现.

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.

任何人都可以帮忙吗?

推荐答案

您可以简单地使用CSS来做到这一点. 不需要js.

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>

这篇关于隐藏图像并在悬停Jquery上显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！