When you use a mouse device on a website, mouse events fire. You’ve seen the click
and wheel
events, but, there are even more mouse events to explore!
The mousedown
event is fired when the user presses a mouse button down. This is different from a click
event because mousedown
doesn’t need the mouse button to be released to fire.

The mouseup
event is fired when the user releases the mouse button. This is different from the click
and mousedown
events because mouseup
doesn’t depend on the mouse button being pressed down to fire.

The mouseover
event is fired when the mouse enters the content of an element.

The mouseout
event is fired when the mouse leaves an element.

Instructions
In this exercise, you’ll modify the list elements using mouse events. You can use the reset element that is already programmed to set the other list element back to their default styles.
First, create a function called increaseWidth()
that changes the .width
of itemOne
to any size greater than '400px'
.
Now, create an event handler for itemOne
that will trigger the increaseWidth()
function when the mouse hovers on it.
Next, create a function called changeBackground()
that changes the .backgroundColor
of itemTwo
.
Let’s use the changeBackground()
function we just created as an event handler for itemTwo
that will be triggered when the mouse is released over the element!
Now, create a function called changeText()
that changes the text of itemThree
to 'The mouse has left the element'
.
Create an event handler for itemThree
that will fire changeText()
function when the mouse leaves the element.
Finally, let’s create a function called showItem()
that makes the itemFive
element appear by changing the .display
style property to 'block'
.
Now, create an event handler for itemFour
that triggers the showItem()
function when the mouse is pressed down on the element.