htmlcssangular7

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>


Solution

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