Can JavaScript Truly Simulate a CSS :hover Effect Without Mouse Interaction?

Simulating a CSS Hover Effect via JavaScript

Question:

Is it possible to use pure JavaScript to mimic a CSS ":hover" effect, activating the associated CSS rules without actually triggering a mouseover event?

Problems Encountered:

• Despite adding a mouseover event listener, the CSS hover declaration remains inactive.
• Attempting to manually add the "hover" class via JavaScript (e.g., theElement.classList.add("hover")) does not trigger the desired visual effects.

Answer:

Unfortunately, simulating a true mouseover event in pure JavaScript is not feasible due to the nature of trusted events.

In web browsers, certain events, such as those triggered by user interaction, are considered trusted. Conversely, events generated by JavaScript, like the one you're trying to simulate, are untrusted. Untrusted events cannot perform certain actions, including triggering default actions for most HTML elements (such as the hover effect).

Solution:

The only viable option is to manually manage the hover effect by adding and removing a class on the target element using the mouseover and mouseout event listeners, respectively. Here's an example:

const hoverElement = document.querySelector("selector");

hoverElement.addEventListener("mouseover", () => {
  hoverElement.classList.add("hover");
});

hoverElement.addEventListener("mouseout", () => {
  hoverElement.classList.remove("hover");
});

The above is the detailed content of Can JavaScript Truly Simulate a CSS :hover Effect Without Mouse Interaction?. For more information, please follow other related articles on the PHP Chinese website!