JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<div id="navbar">
   
    <img src="http://www.sitemakershosting.com/images/50x50.gif" />

</div>

    <img src="http://simurl.com/notinnavbar.jpeg" />

CSS

img{
 width: 50px;
  height: 50px;  
}

JavaScript

var images = document.getElementById('navbar').getElementsByTagName('img'), i;

for(i = 0; i < images.length; i++){
    images[i].onmouseover = function(){
        this.src = this.src.replace(/^(.*)(\.\w{2,4})$/, '$1'+'-ov'+'$2');
    }

    images[i].onmouseout = function(){
        this.src = this.src.replace(/^(.*)-ov(\.\w{2,4})$/, '$1'+'$2');
    }
}