So implementieren Sie JQuery so, dass es beim Bewegen der Maus angezeigt und beim Verlassen ausgeblendet wird-Front-End-Fragen und Antworten-php.cn

So implementieren Sie JQuery so, dass es beim Bewegen der Maus angezeigt und beim Verlassen ausgeblendet wird

青灯夜游

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

Original

3420 Leute haben es durchsucht

Methode: 1. Verwenden Sie die Methode hover(), um Mausereignisse an das übergeordnete Element zu binden, und geben Sie zwei Ereignisverarbeitungsfunktionen an. Die Syntax lautet „parent element.hover (Funktion übergeben, Funktion verlassen)“; Funktion: Verwenden Sie „Child element.show()“, um das untergeordnete Element anzuzeigen. 3. Verwenden Sie in der Ausgangsfunktion „child element.hide()“, um das untergeordnete Element auszublenden.

So implementieren Sie JQuery so, dass es beim Bewegen der Maus angezeigt und beim Verlassen ausgeblendet wird

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

jquery implementiert den Anzeige- und Ausblendungseffekt, wenn die Maus darüber fährt

Implementierungsmethode:

Verwenden Sie die hover()-Methode, um Mausereignisse an das übergeordnete Element zu binden und zwei Ereignisverarbeitungsfunktionen anzugeben --durch die Anzeigefunktion und Verlassen der versteckten Funktion
Verwenden Sie in der Übergabefunktion show(), um die untergeordneten Elemente anzuzeigen
Verwenden Sie in der Verlassensfunktion hide(), um die untergeordneten Elemente auszublenden

Implementierungsbeispiel:

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

Nach dem Login kopieren

So implementieren Sie JQuery so, dass es beim Bewegen der Maus angezeigt und beim Verlassen ausgeblendet wird

Anleitung: Die

hover()-Methode gibt zwei Funktionen an, die ausgeführt werden sollen, wenn der Mauszeiger über dem ausgewählten Element schwebt. Die

-Methode löst Mouseenter- und Mouseleave-Ereignisse aus.

Hinweis: Wenn nur eine Funktion angegeben ist, wird diese sowohl von Mouseenter als auch von Mouseleave ausgeführt.

Syntax:

$(selector).hover(inFunction,outFunction)

Nach dem Login kopieren

Parameter	Beschreibung
inFunktion	Erforderlich. Gibt die Funktion an, die ausgeführt werden soll, wenn das MouseEnter-Ereignis auftritt.
outFunction	Optional. Gibt die Funktion an, die ausgeführt werden soll, wenn das Mouseleave-Ereignis auftritt.

【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video】

Das obige ist der detaillierte Inhalt vonSo implementieren Sie JQuery so, dass es beim Bewegen der Maus angezeigt und beim Verlassen ausgeblendet wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!