Wie kann ich Text auf dem Bild anzeigen, ohne Tooltips zu verwenden?

Text beim Bewegen des Bildes ohne Tooltips anzeigen

Im Webdesign ist es oft wünschenswert, zusätzliche Informationen anzuzeigen, wenn der Benutzer mit der Maus über ein Bild fährt. Obwohl Tooltips eine beliebte Lösung sind, bieten sie möglicherweise nicht immer die gewünschte Ästhetik oder Funktionalität. In diesem Artikel wird untersucht, wie Sie diesen Effekt mit reinem CSS oder jQuery erzielen.

Verwendung von CSS:

CSS3 führt das Pseudoelement :hover ein, das das Stylen ermöglicht, wenn die Maus darüber schwebt über ein Element. In diesem Fall wird der Hover-Effekt auf das Bild angewendet.

HTML:

<div>

CSS:

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

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

Dieses CSS platziert die Textbeschriftung in der unteren linken Ecke des Bildes und verbirgt sie, bis die Maus darüber schwebt Bild.

Verwendung von jQuery:

jQuery kann auch verwendet werden, um den gleichen Effekt zu erzielen. Diese Methode bietet möglicherweise mehr Flexibilität für komplexere Szenarien.

HTML:

Das Gleiche wie vorher.

CSS:

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

jQuery:

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

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

Dieses jQuery-Skript bindet Mouseover- und Mouseout-Ereignisse zum Bildelement und schaltet die Sichtbarkeit der Beschriftung um.

Unabhängig von der verwendeten Methode, von Mithilfe von CSS oder jQuery ist es möglich, einen benutzerdefinierten Hover-Effekt zu erstellen, der zusätzliche Informationen zu einem Bild ohne Verwendung von Tooltips anzeigt.

Das obige ist der detaillierte Inhalt vonWie kann ich Text auf dem Bild anzeigen, ohne Tooltips zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!