CODEWITHSUNDEEP
htmlcssangular7
Nicoleta Wilskon
Nicoleta Wilskon

Reputation: 697

on hovering change the icon

I have this nav bar icons as follows , and on hovering I want to show a different icons , means same icon in blue color bootstrap icon can not be used due to license issues. So what can be done on hovering to change the icon to alerts_torqHover.png 

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

Upvotes: 0

Views: 103

Answers (3)

Alisha
Alisha

Reputation: 101

You could do it by CSS, and it will support on all browser.

.topbaricons a {
  display: none;
}

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

.topbaricons:hover a {
  display: block;
}
<div class="topbaricons">
  <img src="https://www.gravatar.com/avatar/99e96b1a821a2ec12f52ea44b54f302a?s=48&d=identicon">
  <a><img src="https://www.gravatar.com/avatar/78c6fbe63bd0e401d22875c1937cc2a3?s=64&d=identicon"> </a>
</div>

Upvotes: 2

ookadoo
ookadoo

Reputation: 147

I would recommend something like this. Even if you need it to link somewhere else, just put the img tag in the anchor as they won't be able to click without hovering anyway.

On img tag

img:hover {
  content: url("http://placecage.com/c/480/240")
}
<img src="http://placecage.com/c/240/120" />

On class

.hover-change:hover {
  content: url("http://placecage.com/c/480/240")
}
<img class="hover-change" src="http://placecage.com/c/240/120" />

Upvotes: 5

Nidhin Joseph
Nidhin Joseph

Reputation: 10237

Try something like this with :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>

Upvotes: 2

Related Questions