我试图让我的页脚 img
在悬停时更改为不同的 img
,我已经通过创建每个 img
来完成此操作作为 div
,但是,我试图避免这种情况,还有其他可能的方法吗?
当前的 CSS:
.footerLeft {
float:left;
width: 50%;
height: 100px;
color: #fff;
background-color: #33383b;
}
.footerLeft p {
margin-left: 25px;
}
.footerLeft img {
width: 175px;
height: 50px;
padding-left: 25px;
margin-top: 10px;
}
.footerRight {
float:right;
width: 50%;
height: 100px;
color: #fff;
background-color: #33383b;
}
.footerRight img {
width: 35px;
height: 35px;
}
.footerRight p {
text-align: right;
position:relative;
margin-top: -20px;
margin-right: 20px;
}
当前的 HTML:
<div class="footerLeft">
<img src="img/logo.png">
<p>Sharpturn Network© 2016</p>
</div>
<div class="footerRight">
<ul id="menu">
<li><a href="https://www.facebook.com/SharpturnNetwork" target="_blank"><img src="img/footer/facebook.png"></a></li>
<li><a href="https://www.twitter.com/SharpturnNet" target="_blank"><img src="img/footer/twitter.png"></a></li>
<li><a href="https://www.youtube.com/sharpturnnetwork" target="_blank"><img src="img/footer/youtube.png"></a></li>
</ul>
<p>Designed by Ryan Williams</p>
</div>
最佳答案
将一个 img 设置为背景 img,将另一个设置为悬停时的背景图像。
footer {
background-image: url(...);
}
footer:hover {
background-image: url(...);
}
关于html - 在不使用额外的 div 的情况下在悬停时更改图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35531530/