Here is a small jquery code to understand how mouseenter and mouseleave event work by hiding and showing p tag element activity
Here is jquery code written in a file say myjquery.js
1. First scenario is where all the p tag is hidden during loading. And on mouse enter on the h1 tag all p tag element are shown.
$(document).ready(function() {
$("p").hide();
$("h1").mouseenter(function() {
$("p").show();
});
});
2. In the second scenario when the mouse leave on the h1 tag all p tag element are hidden.
$(document).ready(function() {
$("h1").mouseleave(function() {
$("p").hide();
});
});
3. In the third scenario all the above action is repeated but in a slow motion (1000 milisecond)
Show..
$(document).ready(function() {
$("p").hide();
$("h1").mouseenter(function() {
$("p").show(1000);
});
});
Hide..
$(document).ready(function() {
$("h1").mouseleave(function() {
$("p").hide(1000);
});
});
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<h1 class="h1">
This is a simple jquery example</h1>
<div class="p1">
Now this is how I am displayed</div>
<div class="p1">
Is my appearance look exciting to you?</div>
<div class="p1">
I don't care what you feel about me.</div>
</body>
</html>
A sample html demo for your testing.
Here is jquery code written in a file say myjquery.js
1. First scenario is where all the p tag is hidden during loading. And on mouse enter on the h1 tag all p tag element are shown.
$(document).ready(function() {
$("p").hide();
$("h1").mouseenter(function() {
$("p").show();
});
});
2. In the second scenario when the mouse leave on the h1 tag all p tag element are hidden.
$(document).ready(function() {
$("h1").mouseleave(function() {
$("p").hide();
});
});
3. In the third scenario all the above action is repeated but in a slow motion (1000 milisecond)
Show..
$(document).ready(function() {
$("p").hide();
$("h1").mouseenter(function() {
$("p").show(1000);
});
});
Hide..
$(document).ready(function() {
$("h1").mouseleave(function() {
$("p").hide(1000);
});
});
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<h1 class="h1">
This is a simple jquery example</h1>
<div class="p1">
Now this is how I am displayed</div>
<div class="p1">
Is my appearance look exciting to you?</div>
<div class="p1">
I don't care what you feel about me.</div>
</body>
</html>
A sample html demo for your testing.
This is a simple jquery example
Now this is how I am displayed
Is my appearance look exciting to you?
I don't care what you feel about me.
No comments:
Post a Comment