css 悬停时更改图标

qij5mzcb 于 2024-01-09 发布在其他

关注(0)|答案(3)|浏览(108)

我有这个导航栏图标如下，悬停时我想显示一个不同的图标，这意味着相同的图标在蓝色的引导图标不能使用由于许可证问题.所以可以做什么悬停改变图标alerts_torqHover. png

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

字符串

css

来源：https://stackoverflow.com/questions/56962912/on-hovering-change-the-icon

3条答案

按热度按时间

ogq8wdun1#

我会推荐这样的东西。即使你需要它链接到其他地方，只要把img标签在锚，因为他们将无法点击没有悬停无论如何。

在img标签上

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

个字符

在课堂上

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

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

的字符串

赞(0）回复(0）举报 2024-01-09

wgxvkvu92#

你可以通过CSS来实现，它将支持所有浏览器。

.topbaricons a {
  display: none;
}

.topbaricons:hover>img {
  display: none;
}

.topbaricons:hover a {
  display: block;
}

个字符

赞(0）回复(0）举报 2024-01-09

daolsyd03#

使用:hover类尝试类似的操作

.topbaricons:hover .mango {
  display: block;
}

.topbaricons:hover i,
.topbaricons:hover .orange {
  display: none;
}

.mango,
.orange {
  display: none;
}

i,
.orange {
  display: block;
}

img {
  width: 100px;
}

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

css 悬停时更改图标

3条答案

相关问题

热门标签

最新问答