About html button focus and hover style

As we know, the HTML button or other tags has focus and hover attributes.

There are some issue, if we click the button, it is on hover or focus?

The answer is focus, and the button will be highlight.

We move out the mouse cannot remove the highlight style, because it is not hover state, it is focus state.

So if we want to move out the mouse and remove the highlight style at the same time, we can use follows js code:

1
2
3
4
5
document.addEventListener('click', (e) => {
if (document.activeElement.toString() === '[object HTMLButtonElement]') {
document.activeElement.blur()
}
})

Those code can blur the focus state on you clicked button, the focus highlight style will remove at the same time.

But it is add event listener function, so please make sure you only run those code once before your remove this listener.

;