Can JavaScript reliably simulate CSS :hover effects?

Simulating Mouseover in JavaScript: Challenges with CSS :hover

Attempting to simulate a mouseover event in JavaScript to activate the CSS ":hover" property can prove challenging, as demonstrated by the following query:

Question:

I've been attempting to simulate a mouseover event using a mouseover listener in Chrome. While the listener is triggered, the :hover declaration remains inactive. I tried manually adding a "hover" class, but it failed to alter the element's appearance. Is it possible to accomplish this?

Answer:

Unfortunately, this method is not possible. Mouseover is not a trusted event.

Events generated by the user agent (either as a result of user interaction or as a direct result of DOM changes) are events generated by scripts with the DocumentEvent.createEvent("Event") method, Event A trusted event that has privileges not granted to events modified with the .initEvent() method or events dispatched with the EventTarget.dispatchEvent() method. The isTrusted attribute of trusted events has a value of true, and the isTrusted attribute of untrusted events has a value of false.

Most untrusted events do not trigger a default action, with the exception of click or DOMActivate events.

So you have to manually add and remove classes in mouseover/mouseout events.

The above is the detailed content of Can JavaScript reliably simulate CSS :hover effects?. For more information, please follow other related articles on the PHP Chinese website!