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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage