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