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

【问题标题】：Hide image and show text on hover Jquery隐藏图像并在悬停Jquery上显示文本
【发布时间】：2017-01-23 03:57:07
【问题描述】：

我有以下代码：

$(".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 上，我试图隐藏图像并显示文本而不是图像，并且在悬停时它会返回以显示没有图像的图像文本。这就是我卡住的地方。图片变成了文字，但是当我不再悬停时它停留在文字上，所以图片不会回来。

有人可以帮忙吗？

【问题讨论】：

您应该添加一个跨度将文本并在悬停时切换图像或跨度
@guradio 举个例子会有很大帮助:)

标签： javascript jquery html

【解决方案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>

使用文本创建一个跨度。
相应地切换 img 和 span

【讨论】：

【解决方案2】：

您可以简单地使用 css 来做到这一点。不需要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>

【讨论】：

【解决方案3】：

只用css就可以实现。在父级悬停时切换显示属性。

示例代码段：

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

注意：使用jQuery 或css，以您觉得更舒服的为准。

【讨论】：