CodesJava

Easy learning with example program codes

jQuery hover()

The jQuery hover() method is used triggers both the mouseenter and mouseleave events, to execute two functions, i.e, when the mouse pointer roam over the selected element.

Syntax:

$(selector).hover(inFunction,outFunction) 

In Function:

  • It is a mandatory parameter.
  • This parameter specifies the function to run when the mouseenter event occurs.

Out Function:

  • It is a mandatory parameter.
  • This parameter specifies the function to run when the mouseleave 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(){  
	$("p").hover(function(){  
    	$(this).css("background-color", "red");  
    	}, function(){  
    	$(this).css("background-color", "orange");  
	});  
});  
</script>  
</head>  
<body>  
<p>Hover the mouse pointer on me and I will change my color!</p>  
</body>  
</html>

Try it

JS Bin on jsbin.com

Example 2

<!DOCTYPE html>
<html>
<head>
<style>  
  ul {  
	margin-left: 20px;  
	color: black;  
  }  
  li {  
	cursor: default;  
  }  
  span {  
	color: red;  
  }  
  </style>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
</head>  
<body>  
<ul>  
  <li>Burger</li>  
  <li>Pizza</li>  
  <li>Cold Drink</li>  
  <li>French Fries</li>  
</ul>  
<script>  
$( "li" ).hover(  
  function() {  
	$( this ).append( $( "<span>My choice</span>" ) );  
  }, function() {  
	$( this ).find( "span:last" ).remove();  
  }  
);  
$( "li.fade" ).hover(function() {  
  $( this ).fadeOut( 100 );  
  $( this ).fadeIn( 500 );  
});  
</script>  
</body>  
</html>

Try it

JS Bin on jsbin.com

Please follow and like us:
error








Copyright © 2019 CodesJava DMCA.com Protection Status