|
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 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <html>
<head>
<title>HTML-JQuery</title>
<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 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <html>
<head>
<title>HTML-JQuery</title>
<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
|
