Wie zeige ich Text beim Hover eines Bildes mit CSS und jQuery an?

Text beim Bewegen des Bildes anzeigen

Das Erstellen eines kleinen Felds, das angezeigt wird, wenn ein Benutzer mit der Maus über ein Bild fährt, kann durch verschiedene Methoden erreicht werden. Hier ist eine umfassende Anleitung, die Ihnen hilft, den gewünschten Effekt zu erzielen:

CSS3 mit dem Pseudoelement „:hover“

Durch die Verwendung des Pseudoelements „:hover“ in CSS3 können Sie ein Feld anzeigen Bild schweben. Der HTML- und CSS-Code für diese Methode lautet wie folgt:

<div>

#wrapper .text {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

#wrapper:hover .text {
  visibility: visible;
}

jQuery

Alternativ können Sie jQuery verwenden, um das gleiche Ergebnis zu erzielen. Hier ist der HTML-, CSS- und jQuery-Code:

<div>

#wrapper p {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

$('.hover').mouseover(function() {
  $('.text').css("visibility", "visible");
});

$('.hover').mouseout(function() {
  $('.text').css("visibility", "hidden");
});

Dieser jQuery-Code zeigt das „Text“-Element an, wenn die Maus über das Bild fährt, und blendet es aus, wenn die Maus es verlässt.

Anpassen der Box

Um die Größe und Position der Box anzupassen, können Sie die CSS-Werte in den Eigenschaften unten: und links: anpassen. Um die Rahmenverbindung zum Bild zu entfernen, fügen Sie Ihrem CSS Folgendes hinzu:

#wrapper img {
  border: none;
}

Mehrere Bilder und Bildunterschriften

Wenn Sie mehrere Bilder und Bildunterschriften haben, müssen Sie Folgendes tun kann für jedes Bild ein Wrapper-Div erstellen und die Bild- und Textelemente darin einbinden. Kopieren Sie einfach das im Code-Snippet angezeigte Format und ersetzen Sie die Bildquelle und den Text entsprechend.

Das obige ist der detaillierte Inhalt vonWie zeige ich Text beim Hover eines Bildes mit CSS und jQuery an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!