suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So implementieren Sie JQuery so, dass es beim Bewegen der Maus angezeigt und beim Verlassen ausgeblendet wird

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

青灯夜游
青灯夜游Original
2022-04-22 14:35:153421Durchsuche

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>

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

Stellungnahme：
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
Vorheriger Artikel：So ersetzen Sie Knoten durch JqueryNächster Artikel：So ersetzen Sie Knoten durch Jquery

In Verbindung stehende Artikel

Mehr sehen