Hover() method:
This method is used to perform some changes on mouse over and mouse out for html elements. It requires two parameters which are as follows:
- over −This function triggers when the mouse is moved over a matched element.
- out − This function triggers when the mouse is moved out of a matched element.
Syntax:
$(selector).hover(over,out)
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".content").hover(function(){
$(this).css("background-color", "grey");
}, function(){
$(this).css("background-color", "pink");
});
});
</script>
<style type="text/css">
.content{width:300px;padding:10px;float:left;border:1px solid black;margin-right:1px;}
.content p{text-align: center;}
</style>
</head>
<body>
<div class="content">
<p>A relatively new sport</p>
<p>Welcome to my Portal</p>
<p>Welcome to my Portal</p>
<p>Welcome to my Portal</p>
</div>
<div class="content">
<p>packages and web page </p>
<p>Welcome to my Portal</p>
<p>A relatively new sport</p>
<p>Welcome to my Portal</p>
</div>
<div class="content">
<p>Welcome to my Portal</p>
<p>packages and web page</p>
<p>A relatively new sport</p>
<p>Welcome to my Portal</p>
</div>
</body>
</html>
In the above example when a user will move mouse on div with class content , the background-color of that div will change to grey and when will move mouse out then background-color will get changed to pink.
You can check the output of above example here: https://jsfiddle.net/p6qya7kx/
0 Comment(s)