“href” parameter only onmouseover

I have following problem. I have pre-defined href on link which I can’t change or remove in html. I need to have this href only onmouseover. So I removed it with:

document.getElementsByClassName("class")[0].removeAttribute("href");

Now I need to add this href back but only onmouseover, so in default there will be no href attribute and onmouseover will enable it. But this and similar solutions doesn’t work:

document.getElementsByClassName("class")[0].onmouseover="this.href = 'urlHere';"

Is there any way how to do this?

Answer

As I mentioned in my comment, you almost certainly shouldn’t do this, because it will break accessibility. If you just want to change some styling, use CSS and the :hover pseudo-class selector.

However, if you really did have a legitimate use case for this, the best way to do it would be using a WeakMap:

const links = document.querySelectorAll('.link-class-name')

const map = new WeakMap()

links.forEach(link => {
    map.set(link, link.href)

    link.removeAttribute('href')

    link.addEventListener('mouseenter', () => link.href = map.get(link))
    link.addEventListener('mouseleave', () => link.removeAttribute('href'))
})

WeakMaps are cool because they allow you to store arbitrary metadata about arbitrary objects in a way that can be garbage collected when it’s no longer needed. This makes them perfect for storing and retrieving data about DOM nodes.