Home >Web Front-end >JS Tutorial >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:161490browse

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:

JS/jquery implements mouse events to control the display and hiding of page elements (code example)

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:

JS/jquery implements mouse events to control the display and hiding of page elements (code example)

The effect of moving the mouse up:

JS/jquery implements mouse events to control the display and hiding of page elements (code example)

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!

jquery 指针 JS 事件鼠标事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What technologies does ajax include? Summary of the significance of ajax technology (with examples included)Next article：What technologies does ajax include? Summary of the significance of ajax technology (with examples included)

See more

JS/jquery implements mouse events to control the display and hiding of page elements (code example)

Related articles