Wie ändere ich ein Bild beim Hover mit CSS oder JavaScript richtig?

Ändern der Darstellung des Bildes beim Schweben mit CSS/HTML

Möglicherweise tritt ein Problem auf, bei dem Sie ein Bild so eingestellt haben, dass es anders angezeigt wird Wenn Sie mit der Maus darüber fahren, wird das Bild angezeigt, aber das Originalbild ist immer noch sichtbar und das neue Bild überlappt sich oder ändert seine Größe nicht. Für Anfänger in HTML/CSS kann diese scheinbar einfache Aufgabe eine Herausforderung darstellen.

Um dieses Problem zu beheben, stellen Sie mithilfe einer transparenten Bilddatei sicher, dass das Originalbild richtig auf transparent eingestellt ist. Überprüfen Sie außerdem mithilfe der entsprechenden Selektorsyntax, ob Ihre CSS-Regeln auf das richtige Element abzielen:

img#Library {
    height: 70px;
    width: 120px;
}

img#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}

Wenn das Problem jedoch durch die Verwendung von CSS nicht behoben werden kann, können Sie eine alternative Methode mit JavaScript in Betracht ziehen:

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />

In diesem JavaScript-Code werden die Ereignisse onmouseover und onmouseout verwendet, um die Bildquelle basierend auf der Mausinteraktion dynamisch zu ändern.

Das obige ist der detaillierte Inhalt vonWie ändere ich ein Bild beim Hover mit CSS oder JavaScript richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!