将鼠标悬停在链接上时的新图像

New image when hovering on link

本文关键字：新图像 图像 悬停 鼠标 链接      更新时间：2023-09-26
<div id="social-links"> 
    <div><a href=""><img src="pictures/facenh.png"/></a></div>
    <div><a href=""> <img src="pictures/twitternh.png"  /></a></div>
    <div><a href=""> <img src="pictures/ytnh.png"  /></a></div>
    <div><a href=""> <img src="pictures/mailnh.png"  /></a> </div>  
</div>

这是我正在使用的代码。我想做的是将鼠标悬停在图像/链接上时显示另一个图像。我不知道该怎么做，所以我希望得到一些帮助。

#social-links {
    float: left;
    width: 100px;
    height: 500px;
    margin-left: -20px;
}

如果你需要知道社交链接的css，它就在那里。我想做的只是在将鼠标悬停在链接/图像上时出现另一个图像。也许需要Javascript？

不需要JavaScript，你可以使用CSS。

将图像用于链接并不是很好的做法，因为搜索引擎不会读取它们或从中获取任何上下文。 最好有一个文本链接，用CSS中的图像替换 - 例如

<div id="social-links"> 
    <div><a href="" id="facebookLink"><span>Facebook</span></a></div>
    ...
</div>

然后，在您的 CSS 中，只需隐藏文本，并替换为标准和悬停的图像。

#social-links {
    float: left;
    width: 100px;
    height: 500px;
    margin-left: -20px;
}
#social-links a span {
    display: none;
}
#facebookLink {
    display: block;
    background: url('path-to-facebook-image.jpg');
    width: 50px;
    height: 50px;
}
 #facebookLink:hover {
    background: url('path-to-facebook-hover-image.jpg');
}

这是一个jQuery解决方案。在这里摆弄。

$("#facebook").hover( function () {
    $(this).find("img").attr('src', "http://placehold.it/150x150/ff0000/000000");
}, function () {
    $(this).find("img").attr('src', 'http://placehold.it/150x150');
});

我真的认为这个来自@talemyn的链接也是你正在寻找的。无论哪种方式都应该完成工作。

相关文章：