Here on the forum webpage of SitePoint I try to change the background color of each child element of the top sticky menu , on mousehover
event, but I fail to do so with the following code.
document.querySelector('.contents').querySelectorAll('*').forEach( (element)=>{
element.addEventListener('mousehover', ()=>{
element.style.background = "red";
});
});
How to change the background color of an element, on mousehover event, with vanilla JavaScript?
1 Like
bendqh1:
mousehover
There is no mousehover
event.
Available mouse events are (not counting click, double click and context menu):
onmousedown
: A mouse button is pressed over an element
onmouseenter
: The pointer is moved onto an element
onmouseleave
: The pointer is moved out of an element
onmousemove
: The pointer is moving over an element
onmouseout
: The mouse pointer moves out of an element
onmouseover
: The mouse pointer is moved over an element
onmouseup
: The mouse button is released over an element
To make your code work here on SitePoint:
document.querySelectorAll('header a, header li').forEach(element => {
element.addEventListener('mouseover', () => {
element.style.background = 'red';
});
});
See also:
The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).
Common events using this interface include click, dblclick, mouseup, mousedown.
3 Likes
system
Closed
September 23, 2024, 1:22pm
3
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.