我的导航栏图标如下,悬停时我想显示不同的图标,这意味着由于许可证问题,无法使用蓝色引导程序图标中的相同图标。那么悬停时可以做什么来将图标更改为alerts_torqHover.png
<div class="topbaricons">
<img src="assets/icons/alerts_torq.png">
<a><img src="assets/icons/alerts_torqHover.png"> </a>
</div>
我会推荐这样的东西。即使您需要它链接到其他地方,只需将 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" />
你可以通过CSS来做到这一点,并且它将支持所有浏览器。
.topbaricons a {
display: none;
}
.topbaricons:hover>img {
display: none;
}
.topbaricons:hover a {
display: block;
}
<div class="topbaricons">
<img src="https://www.gravatar.com/avatar/78c6fbe63bd0e401d22875c1937cc2a3?s=64&d=identicon&r=PG&f=y&so-version=2">
<a><img src="https://www.gravatar.com/avatar/99e96b1a821a2ec12f52ea44b54f302a?s=48&d=identicon&r=PG&f=y&so-version=2"> </a>
</div>
在
: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;
}
<div class="topbaricons">
<img class="mango" src="http://www.twentyonepilots.com/sites/g/files/g2000004896/f/Sample%202_0.jpg">
<img class="orange" src="https://images-na.ssl-images-amazon.com/images/I/51TcdS9z2fL._SY300_QL70_.jpg">
<i class="userName" style=" margin-left: 15px">ICON</i>
</div>