Let us explain with an example:-
mouse.html:-
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/mouse.js"></script>
</head>
<body>
<h3>Mouse Enter Example</h3>
<p id="p1">Move your mouse to this paragraph</p>
<hr/>
<h3>Mouse Leave Example</h3>
<p id="p2">Exit mouse from this paragraph</p>
<hr/>
<h3>Mouse Down Example</h3>
<p id="p3">Mouse Down on this paragraph</p>
<hr/>
<h3>Mouse Up Example</h3>
<p id="p4">Mouse up on this paragraph</p>
</body>
</html>
mouse.html:-
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/mouse.js"></script>
</head>
<body>
<h3>Mouse Enter Example</h3>
<p id="p1">Move your mouse to this paragraph</p>
<hr/>
<h3>Mouse Leave Example</h3>
<p id="p2">Exit mouse from this paragraph</p>
<hr/>
<h3>Mouse Down Example</h3>
<p id="p3">Mouse Down on this paragraph</p>
<hr/>
<h3>Mouse Up Example</h3>
<p id="p4">Mouse up on this paragraph</p>
</body>
</html>
mouse.js:-
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered this paragraph");
});
$("#p2").mouseleave(function(){
alert("You just left from this paragraph");
});
$("#p3").mousedown(function(){
alert("Mouse Down on this paragraph");
});
$("#p4").mouseup(function(){
alert("Mouse up on this paragraph");
});
});
Screenshot:-
Explanation:-
Here, separate paragraphs have been used for all the mouse events functionality in Jquery. <p> tag has been used, declared along with the attribute "id". This "id" value has been called in the different functions of the mouse events. Different functions like "mouseenter", "mouseleave", "mousedown" and "mouseup" has been used in the above example.
No comments:
Post a Comment