[英]New image when hovering on link
<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');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.