Warum überlappt sich mein Hover-Bild, anstatt das Original zu ersetzen?

Ändern der Bildanzeige mit CSS/HTML-Hover

Beim Versuch, ein Bild beim Bewegen der Maus durch ein anderes zu ersetzen, kann es vorkommen, dass das Das Originalbild bleibt sichtbar oder das neue Bild passt seine Abmessungen nicht an, sodass sie sich überlappen. Hier ist ein Blick auf das Problem und eine mögliche Lösung.

Der bereitgestellte Code zeigt das Problem:

<img src="LibraryTransparent.png">

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

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

In diesem Code stellt das Festlegen des Hintergrundbilds beim Schweben sicher, dass das zweite Das Bild erscheint über dem ersten, ändert aber möglicherweise nicht die richtige Größe oder Position.

Alternative Lösung: Verwenden JavaScript

Eine weitere Option besteht darin, JavaScript zu verwenden, um die Bildänderung zu verarbeiten:

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

Bei diesem Ansatz ändert ein Onmouseover-Ereignis die Bildquelle zur Alternative, wenn die Maus darüber fährt , und ein onmouseout-Ereignis stellt die Quelle auf das Originalbild zurück, wenn die Maus weggeht. Die Verwendung von JS bietet eine direktere Kontrolle über die Bildbearbeitung und gewährleistet einen nahtlosen Übergang zwischen Bildern.

Das obige ist der detaillierte Inhalt vonWarum überlappt sich mein Hover-Bild, anstatt das Original zu ersetzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!