How to do image substitution using js?

Question

HTML

There is an img when hovering over an img, another img should appear instead of the previous one, how to do this?
Can this be done without js?
If not, how to do it with minimal js.

Answer 1

<img src="img.png" onHover='this.src="img_hover.png"' onMouseOut='this.src="img.png"'/>

Answer 2

Do it with a div and change the background with :hover, or if you basically need an img, then wrap two img in one block (one img will have opacity: 0) and hang :hover on the block.