Question

Basically, what I’d like is that a function is called whenever someone hovers on an img tag, and the changes the function made are removed when the user stops hovering.

What in trying to do is that add some html after an image when it is hovered on, and if there is no hover on any image, It clears the added html.

So basically, something like, if any image on The page is hovered on, run function (which can manipulate the image which is hovered, using outerhtml most probably) and if the user isn’t hovering on any image, all images outer html should be blank.

I’d prefer a solution that is vanilla Javascript instead of jq.

I hope I’m making sense here.

Answer 1

Use the following code:

function DoWork() {};
function RevertWork() {};

var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onmouseover = DoWork;
    imgs[i].onmouseout = RevertWork;
}