-->

jQuery hover() Method

By: Bipin C Mathew 7 months, 1 week ago

The hover is a Jquery Event Method. It occur when we click on an element. It executes two functions mouseover and mouseout. When we run over the selected item with the mouse pointer the hover() method triggers both the mouseenter and mouseleave events.

Syntax:

$(selector).hover(inFunction,outFunction)

Parameter: It accepts two parameters which are specified below-

  • inFunction: It specifies the function to run when the mouse-enter event occurs.
  • outFunction: It is optional and specifies the function to run when the mouse-leave event occurs.

Example:

<html> 

<head> 
	<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
	</script> 
	<script> 
		<!-- jQuery code to show the working of hover() method -->
		$(document).ready(function() { 
			$("p").hover(function() { 
				$(this).css("background-color", "green"); 
			}, function() { 
				$(this).css("background-color", "yellow"); 
			}); 
		}); 
	</script> 
	<style> 
		p { 
			width: 55%; 
			height: 80px; 
			padding: 20px; 
			margin: 10px; 
			border: 2px solid green; 
			font-size: 50px; 
		} 
	</style> 
</head> 

<body> 
	<!--move the mouse in and out over this paragraph 
		and background color will change-->
	<p>Atemon !</p> 

</body> 

</html> 

Comments

Let us talk!

We take the vision which comes from dreams and apply the magic of science and mathematics, adding the heritage of our profession and our knowledge to create a design.