How to implement jquery to display when the mouse passes and hide when leaving-Front-end Q&A-php.cn

How to implement jquery to display when the mouse passes and hide when leaving

青灯夜游

Release： 2022-04-22 14:35:15

Original

3366 people have browsed it

Method: 1. Use the hover() method to bind mouse events to the parent element, and specify two event processing functions, with the syntax "parent element.hover (passing function, leaving function)"; 2. After In the function, use "child element.show()" to display the child element; 3. In the leaving function, use "child element.hide()" to hide the child element.

How to implement jquery to display when the mouse passes and hide when leaving

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

jquery realizes the mouse passing display and leaving the hiding effect

Implementation method:

Use hover () method binds mouse events to the parent element, and specifies two event processing functions--the passing display function and the leaving hidden function
In the passing function, use show() to display the child Element
In the leaving function, use hide() to hide the child element

Implementation example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			div{
				border: 1px solid red;
				height: 100px; 
				 
			}
			p{
				background-color: pink;
				display: none;
			}
		</style>
		<script>
			$(function() {
				$("div").hover(function() {
					$("p").show();
				}, function() {
					$("p").hide();
				});
			})
		</script>
	</head>
	<body>
		<div>
			<p>
				p元素，默认是隐藏的，当鼠标经过时显示，离开时隐藏
			</p>
		</div>
		<br>
		<span>使用鼠标悬停div元素</span>
	</body>
</html>

Copy after login

How to implement jquery to display when the mouse passes and hide when leaving

Description:

hover() method specifies two functions to be run when the mouse pointer hovers over the selected element.

Method triggers mouseenter and mouseleave events.

Note: If only one function is specified, both mouseenter and mouseleave will execute it.

Syntax:

$(selector).hover(inFunction,outFunction)

Copy after login

Parameters	Description
inFunction	Required. Specifies the function to run when the mouseenter event occurs.
outFunction	Optional. Specifies the function to run when the mouseleave event occurs.

[Recommended learning: jQuery video tutorial, web front-end video】

The above is the detailed content of How to implement jquery to display when the mouse passes and hide when leaving. For more information, please follow other related articles on the PHP Chinese website!