Link remains :hover'ed when opened from JS

Question

This might be a little interesting for people who know front-end in depth.

This doesn't make sense, try it yourself:

1. Open a link with href + target="_blank"
2. Close the opened tab and go back to the original
3. The link state is now :focus

That is fine. But what is wrong with this?

1. Open a link with window.open() on click event
2. Close the opened tab and go back to the original
3. The link state is now :hover, even though it's not really hovered. And you can't do anything about it unless you start moving cursor. trigger('mouseout') doesn't help and nothing really does.

Here's a JSFiddle – I've added a console.log() output for each event and made states different colors, so you can see better.

Answer 1

Browser keeps :hoverstatus until the mouse passes over other thing, if the mouse remained in the same position when you open the new window/tab, it will keep the :hover. When you return the focus to the page the :hover will remove as soon you pass the mouse over something else. That behavior could be buggy in some computers(not necessarily browser fault) and will stay until you click in another place.