при зависании сменить иконку

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" />

Answer 2

Вы можете сделать это с помощью CSS, и он будет поддерживаться во всех браузерах.

.topbaricons a {
  display: none;
}

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

.topbaricons:hover a {
  display: block;
}

<div class="topbaricons">
  <img src="https://placeimg.com/100/100/all">
  <a><img src="https://placeimg.com/100/101/all"> </a>
</div>

Answer 3

Попробуйте что-нибудь подобное с :hover class

.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>