##### ###### ##### ### # # ### # # ###### ## ## ## ## ## ## ## # # # # # ## ##### #### ##### # # # # # # # #### ## # ## ## ## ## # # # # # ## ## # ###### ## ### # ### # ######
##### ###### ##### ### # # ### # # ###### ## ## ## ## ## ## ## # # # # # ## ##### #### ##### # # # # # # # #### ## # ## ## ## ## # # # # # ## ## # ###### ## ### # ### # ######
Track mouse movement and state
Mouse events track movement and button state:
el.addEventListener("mouseenter", () => {
el.classList.add("hovered");
});
el.addEventListener("mouseleave", () => {
el.classList.remove("hovered");
});
el.addEventListener("mousemove", (e) => {
console.log(e.clientX, e.clientY);
});
Use mouseenter/mouseleave over mouseover/mouseout to avoid bubbling issues.