Ändern Sie das Bild auf Mouseover

StackOverflow https://stackoverflow.com/questions/1468085

  •  13-09-2019
  •  | 
  •  

Frage

Ich habe eine einfache HTML/CSS -Seite, auf der ich ein Bild zeige.

Wenn der Benutzer die Maus auf dem Bild bewegt, möchte ich das Bild auf ein anderes Bild austauschen.
Nach dem Verlassen des Bildbereichs sollte das alte Bild erneut angezeigt werden.

Wie kann ich das erreichen? Eine Version, die ohne JavaScript funktioniert, wäre am besten.

Danke im Voraus!

War es hilfreich?

Lösung

Sie können CSS verwenden, um das Hintergrundbild eines Elements zu ändern, wenn Sie darüber schweben. Das hover Die Pseudo-Klasse wird bei den meisten Elementen in jüngsten Browsern unterstützt. Um jedoch rückwärts kompatibel zu sein (Internet Explorer 6), müssen Sie ein Anker-Tag für verwenden hover arbeiten.

Das Onclick -Ereignis im Link ist nur so, dass nichts passiert, wenn Sie darauf klicken. Es hat nichts mit dem schwebenden Effekt zu tun. Sie können natürlich etwas tun, wenn das Bild angeklickt wird, wenn Sie möchten.

HTML:

<a href="#" id="picture" onclick="return false;"></a>

CSS:

#picture {
   display: block;
   width: 200px;
   height: 200px;
   background-image: url(firstimage.gif);
   border: none;
   text-decoration: none;
}
#picture:hover {
   background-image: url(hoverimage.gif);
}

Andere Tipps

Dies Scheint ziemlich prägnant und gut geschrieben (Hinweis: CSS -Rollover -Lösungen funktionieren nicht auf IE6.)

<img src="https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png" onmouseout="this.src='https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png'" onmouseover="this.src='https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png'" alt="image" width="50px" height="50px">

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top