To continue with our discussion on events, in this lesson we will take a look at the mouseenter and mouseleave event.
The mouseenter event will trigger an action when the mouse pointer enters a certain proximity of the specified html element.
In the sample code below, we can see that an alert appears when the mouse pointer is positioned next to the paragraph of text.
alert("Your Mouse Entered Paragraph 1");
<p id="p1">This is Paragraph 1.</p>
Let's take a look at the code.
We start with the
$(document).ready() function. Next we specify the element to apply the action to, in this case p1.
Next is our event,
followed by the action, which is the alert message box that appears in our browser.
In addition to
mouseenter, we also have
mouseleave, which triggers the action once the mouse has left the proximity of the specified element.