在悬停Jquery上隐藏图像和显示文本
在悬停Jquery上隐藏图像和显示文本
提问于 2017-01-23 11: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上时做的是，我试图隐藏图像并显示文本，而不是图像，在悬停时，它返回到显示不带文本的图像。这就是我被卡住的地方。图像更改为文本，但当我不再停留在文本上时，它仍停留在文本上，因此图像不会返回。
有人能帮上忙吗？
回答 3
Stack Overflow用户
发布于 2017-01-23 12:07:04
$(".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和跨度
Stack Overflow用户
发布于 2017-01-23 12:14:23
您可以简单地使用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>
Stack Overflow用户
发布于 2017-01-23 12:12:00
只需使用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中您觉得更舒服的一个。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41799056
复制相关文章
相似问题
腾讯云开发者
