悬停时更改图标

Question

我的导航栏图标如下，并且在悬停时我想显示不同的图标，这意味着由于许可证问题，无法使用蓝色引导图标中的相同图标。因此，将鼠标悬停以将图标更改为Alerts_torqHover.png时可以做什么

<div class="topbaricons">
  <img src="assets/icons/alerts_torq.png">
  <a><img src="assets/icons/alerts_torqHover.png"> </a>
</div>

Answer 1

我会推荐这样的东西。即使您需要它链接到其他位置，也只需将img标签放在锚点中，否则他们将无法点击而无法悬停。

在img标签上

img:hover {
  content: url("http://placecage.com/c/480/240")
}

<img src="http://placecage.com/c/240/120" />

上课

.hover-change:hover {
  content: url("http://placecage.com/c/480/240")
}

<img class="hover-change" src="http://placecage.com/c/240/120" />