Home  >  Article  >  Web Front-end  >  How to implement jquery to display when the mouse passes and hide when leaving

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

青灯夜游
青灯夜游Original
2022-04-22 14:35:153375browse

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>

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)
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!

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