CodesJava

Easy learning with example program codes

jQuery mouseover()


The jQuery mouseover() method is used to attach a function to run when a mouseover event occurs i.e, when mouse cursor runs over the selected element.

The mouseover and mouseenter methods are more or like similar. The only difference lies in event triggering. The mouseenter event triggers if the mouse pointer enters the selected element whereas the mouseover event triggers if the mouse cursor enters any child elements of the selected element or the selected element itself.

Syntax:

To trigger the mouseover event for selected elements.

$(selector).mouseover()  

To add a function to the mouseover event.

$(selector).mouseover(function)  

Function:

  • It is an optional parameter.
  • The function parameter specifies the function to run when the event occurs.

 

Example 1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
	$("body").mouseover(function(){  
    	$("body").css("background-color", "lightgreen");  
	});  
	$("body").mouseout(function(){  
    	$("body").css("background-color", "orange");  
  	});  
});  
</script>  
</head>  
<body>  
<h1> Hello </h1>
<p>Move your cursor over this paragraph.</p>
 
</body>  
</html>

Try it

JS Bin on jsbin.com

Example 2

<!DOCTYPE html>
<html>
<head>
 
<style>  
  div.out {  
	width: 60%;  
	height: 120px;  
	margin: 15px;  
	background-color: turquoise;  
  }  
  div.in {  
	width: 60%;  
	height: 60%;  
	background-color: blue;  
	margin: 10px auto;  
  }  
  </style>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   
</head>  
<body>  
 <div class="out">  
  <span style="padding:20px">move your mouse</span>  
  <div class="in"></div>  
</div>  
<script>  
$( "div.out" )  
  .mouseover(function() {  
	$( this ).find( "span" ).text( "mouse over " );  
  })  
  .mouseout(function() {  
	$( this ).find( "span" ).text( "mouse out " );  
  });  
</script>  
</body>  
</html>

Try it

JS Bin on jsbin.com

Sign Up/ Sign In
Ask a Question


Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2018 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki