html - 在不使用额外的 div 的情况下在悬停时更改图像

Question

我试图让我的页脚 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&copy; 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>

Answer 1

将一个 img 设置为背景 img，将另一个设置为悬停时的背景图像。

footer {
  background-image: url(...);
}
footer:hover {
  background-image: url(...);
}