|
Note
mouseover() function used to do something when over on some element.
Example: 1 How to show some element,when you hover on one div.
Related Topic:
mouseout() function used to do something when leave from some element.
Example: 2 How to do something,when you leave from one div.
|
Example: 1 How to show some element,when you hover on one div <html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
$(".one").mouseover(function () {
$(".two").show();
});
$(".three").mouseover(function () {
$(".four").show();
});
});
</script>
<style type="text/css">
.two,
.four {
display: none;
}
</style>
</head>
<body>
<div class="one">one-hover here to show next number</div>
<div class="two">two</div>
<div class="three">three-hover here to show next number</div>
<div class="four">four</div>
</body>
</html> |
Example: 2 How to do something,when you leave from one div <html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
$(".one").mouseover(function () {
$(".two").show();
});
$(".three").mouseover(function () {
$(".four").show();
});
$(".one").mouseout(function () {
$(".two").hide();
});
$(".three").mouseout(function () {
$(".four").hide();
});
});
</script>
<style type="text/css">
.two,
.four {
display: none;
}
</style>
</head>
<body>
<div class="one">one-hover here to show next number</div>
<div class="two">two</div>
<div class="three">three-hover here to show next number</div>
<div class="four">four</div>
</body>
</html> |
|
Example: 1 Demo
|
|
Example: 2 Demo
|
