Question

我有以下代码：

＆＃13;

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

＆＃13;

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

＆＃13;

现在，我正在尝试将鼠标悬停在每个或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>

使用文字创建范围。
相应地切换img和span

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

Answer 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，无论您觉得哪个更舒服。

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

3 个答案: