时间戳

首页 > 解决方案 > 悬停时更改图标

html - 悬停时更改图标

问题描述

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

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

标签： htmlcssangular7

解决方案

我会推荐这样的东西。即使您需要将它链接到其他地方，只需将 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" />

推荐阅读