EVENTS - mouseover()

The mouseover() Event executes when a mouse pointer enters an element as well as its child elements.

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://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('img').mouseover( function() { 
            	$('p').text("Mouse pointer is in 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').mouseover( function() {
	$('p').text("Mouse pointer is in the image")
});

At first we locate the image,

$('img')

Then we use the mouseover() event,

$('img').mouseover(...)

And put the function inside mouseover() event to change the contents of <p> element.

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

And the 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.

Now, let us take another example, where the <img> element is under a <div> element.

Example :

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

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

      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('div').mouseover( function() { 
            	$('p').text("Mouse pointer is in the image")
            });
            
      	</script>      
  	</body>
</html>

Output :

In this case, we have the <img> element inside a <div> element.

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

Now, if you see the JQuery statement,

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

We are calling the mouseover() event on the <div> element. And since the <img> element is inside the <div> element, the mouseover() event gets triggered.

❮❮ PREV NEXT ❯❯