How to use JQuery Event mouseenter() Method
This article describe about jQuery Event mouseenter() Method.
jQuery Event mouseenter() Method
When mouse pointer over the an element then mouseenter event occur, but this event is used now a days with the mouseleave event.
And the mouseenter() method triggers the mouseenter event, it is also define what will happens when mouseenter event occurs.
Note: This event only trigger when mouse pointer enter the selected element. Unlike the mouseover event. And also mouseover trigger only when mouse pointer enter the child element
Example
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").mouseenter(function () {
$("p").css("background-color", "red");
});
$("p").mouseleave(function () {
$("p").css("background-color", "Gray");
});
});
</script>
</head>
<body>
<p style="background-color:#E9E9E4">The mouse pointer over this paragraph then hover.</p>
</body>
</html>
|
Output
Trigger the mouseenter Event
It is generate trigger for the selected element.
Example
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").mouseenter(function () {
$("p").css("background-color", "red");
});
$("p").mouseleave(function () {
$("p").css("background-color", "Gray");
});
$("#btn1").click(function () {
$("p").mouseenter();
});
$("#btn2").click(function () {
$("p").mouseleave();
});
});
</script>
</head>
<body>
<p style="background-color:#E9E9E4">The mouse pointer over this paragraph then hover.</p>
<button id="btn1">mouseenter event activate for the paragraph</button><br />
<button id="btn2">mouseleave event Activate for the paragraph</button>
</body>
</html>
|
Output
Bind a Function to the mouseenter Event
It is define a function to run when mouseenter event generate the trigger.
Syntax
|
$(selector).mouseenter(function)
|
You may also want to read these related articles Click here
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here