JQuery Mouse Hover
From w3cyberlearnings
Contents |
jQuery Mouse Hover
jQuery Mouse Hover Event Handler.
Syntax
$(selector).hover(
function(){ alert('one');}, // over
function(){ alert('two');} // out
);
OR
$(selector).hover(over,out);
Example 1
- When mouse places over the Mouse Hover Test text, it calls the alert('one')
- When moue out of the text, it calls alert('two')
<html>
<head>
<title>Hover 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".obmma").hover(function(){
alert('one');
}, function(){
alert('two');
});
});
</script>
</head>
<body>
<div class="obmma">Mouse Hover Test</div>
</body>
</html>
Example 2
Display a different text when mouser over or out.
<html>
<head>
<title>Show and Hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button#mybtn').hover(function(){
$(this).text('Hide');
}, function(){
$(this).text('Show');
});
});
</script>
</head>
<body>
<button id="mybtn">Show</button>
</body>
</html>
Example 3
- Need two images for this tutorial.
- When mouse over the image, the image changes to a different image.
<html>
<head>
<title>Show and Hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$('img#mybtn').hover(function(){
$(this).attr("src","image2.png");
}, function(){
$(this).attr("src","image1.png");
});
});
</script>
</head>
<body>
<img src="image1.png" alt="My Picture Image" id="mybtn"/>
</body>
</html>
Example 4
Mouse over the URL link dispalys a note after the URL link.
<html>
<head>
<title>URL LINK and Hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.min.js">
</script>
<style>
#mycontent{
width:150px;
height:150px;
background-color:blue;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.sp3').hover(
function(){
$(this).append($("<span>Mark</span>"));
},
function(){
$(this).find("span:last").remove();
}
);
});
</script>
</head>
<body>
<a href="#" class="sp3">Link 1</a><br/>
<a href="#" class="sp3">Link 2</a><br/>
<a href="#" class="sp3">Link 3</a><br/>
<a href="#" class="sp3">Link 4</a><br/>
</body>
</html>
Related Links
jQuery Mouse Hover
