❮❮ PREV NEXT ❯❯

EVENTS - hover()

The hover() Event executes when a mouse pointer either enters or leaves an element. In other words, if you just move the mouse pointer through an element, hover() Event executes.

The hover() Event accepts two functions. The first function executes when the mouse pointer have entered an element and the second function executes when the mouse pointer leaves an element.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	<p class = "para1"> First Paragraph </p>
    	
    	<img src = "/myImage.png" alt = "Bring the mouse pointer here"/>

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
		$('img').hover( 
			function() { 
            	$('p').text("Mouse pointer is in the image")
            }, function() { 
            	$('p').text("The Mouse pointer is outside the image")
        	}	
        );
            
      	</script>      
  	</body>
</html>

Output :

So, if you look at the above code, we have a <p> element,

<p class = "para1"> First Paragraph </p>

And we have an image,

<img src = "/myImage.png" alt = "Bring the mouse pointer here"/>

Now, if we take a look at the JQuery statement,

$('img').hover(
	function() {
		$('p').text("Mouse pointer is in the image")
	}, function() {
		$('p').text("The Mouse pointer is outside the image")
	}
);

At first we locate the image,

$('img')

Then we use the hover() event,

$('img').hover(...)

And put two anonymous functions inside hover() event to change the contents of <p> element.

$('img').hover(
	function() {
		$('p').text("Mouse pointer is in the image")
	}, function() {
		$('p').text("The Mouse pointer is outside the image")
	}
);

And the first function,

function() {
	$('p').text("Mouse pointer is in the image")
}

Changes the content of <p> with the text,

'Mouse pointer is in the image'

When the mouse pointer enters the Image.

And the second function

function() {
	$('p').text("The Mouse pointer is outside the image")
}

Changes the content of <p> with the text,

'The Mouse pointer is outside the image'

When the mouse pointer leaves the Image.

❮❮ PREV NEXT ❯❯