Home > Article > Web Front-end > JS/jquery implements mouse events to control the display and hiding of page elements (code example)
JS/jquery implements mouse events to control the display and hiding of page elements (code example)
- 青灯夜游Original
- 2018-09-10 16:37:161390browse
This chapter introduces how to use JS/jquery to control the visibility of page elements using mouse events. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. mouseout and mouseleave
For the movement of the mouse pointer in and out, the mouseover, mouseout and mouseleave events are involved.
mouseover: This event is triggered when the mouse pointer moves to the target element;
mouseout: This event is triggered when the mouse pointer moves out of the target element or its sub-elements;
mouseleave: This event will only be triggered when the mouse pointer moves out of the target element;
Special attention needs to be paid here to the difference between mouseout and mouseleave. Let's take a look at the following code example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标控制页面元素显隐</title>
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#boxout,
#boxleave {
width: 250px;
height: 100px;
padding-top: 20px;
background-color: #cccccc;
float: left;
margin-left: 30px;
}
#boxoutson,
#boxleaveson {
width: 200px;
height: 50px;
background-color: yellow;
padding: 0px auto;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="boxout">
<div id="boxoutson">
第<span></span>次触发mouseout事件
</div>
</div>
<div id="boxleave">
<div id="boxleaveson">
第<span></span>次触发mouseleave事件
</div>
</div>
<script>
x = 0;
y = 0;
$("#boxout").mouseout(function() {
$("#boxout span").text(x += 1);
});
$("#boxleave").mouseleave(function() {
$("#boxleave span").text(y += 1);
});
</script>
</body>
</html>
Rendering:
2. fadeIn and fadeOut
In the previous example, the show() and hide() methods were used, and the foreground hiding effect was completed instantly. In order to improve the actual user experience, here we introduce two more friendly "friends", namely fadeIn and fadeOut.
fadeIn: method uses the fade-in effect to display the target element.
fadeOut: method uses the fade-out effect to hide the target element
These two methods can configure parameters to control the speed, such as slow, normal, fast or specify the number of milliseconds.
Let's sit down and compare the effects of show(), hide() and fadeIn(), fadeOut(). The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标控制页面元素显隐</title>
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#box1,
#box2 {
width: 250px;
height: 100px;
padding-top: 20px;
background-color: #cccccc;
float: left;
margin-left: 30px;
}
#box1son,
#box2son {
width: 200px;
height: 50px;
background-color: yellow;
padding: 0px auto;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="box1">
<div id="box1son">
<span>hide和show</span>
</div>
</div>
<div id="box2">
<div id="box2son">
<span>fadeIn和fadeOut</span>
</div>
</div>
<script>
$("#box1 span").hide();
$("#box1").mouseover(function() {
$("#box1 span").show();
}).mouseleave(function() {
$("#box1 span").hide();
});
$("#box2 span").hide();
$("#box2").mouseover(function() {
$("#box2 span").fadeIn("slow");
}).mouseleave(function() {
$("#box2 span").fadeOut("slow");
});
</script>
</body>
</html>
The rendering of the mouse not moving up:
The effect of moving the mouse up:
The above is the detailed content of JS/jquery implements mouse events to control the display and hiding of page elements (code example). For more information, please follow other related articles on the PHP Chinese website!