visibility: hidden doesn't take effect until the mouse is moved.
const link = document.getElementById("link");
link.onclick = (event) => {
link.style.visibility = "hidden";
link.style.pointerEvents = "none";
event.preventDefault();
};<a id="link" href="http://localhost">home</a>I want to remove CSS hover effect on the #link.
If I click on #link without moving the mouse, it still stays hovered (cursor changes to pointer and link appears at the bottom).
Applying display: none would work, but I prefer not to use it in order to utilize transition and opacity.