Wie kann ich Bildüberlappungen verhindern, wenn ich Bilder beim Schweben mit CSS oder JavaScript ändere?

Anpassen der Bilddarstellung beim Hover mit HTML, CSS und JavaScript

Beim Umgang mit Bildübergängen beim Hover kann es vorkommen, dass Sie auf a Häufiges Problem, bei dem das zugrunde liegende Bild sichtbar bleibt und das aktualisierte Bild nicht an die gewünschte Höhe und Breite angepasst wird, was zu einem Fehler führt Überlappung.

In Ihrem Code-Snippet:

<img src="LibraryTransparent.png">

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

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

Ihr Versuch, das Hintergrundbild zu ändern, ist korrekt. Um die Höhen- und Breitenprobleme zu beheben, können Sie jedoch die folgenden CSS-Eigenschaften innerhalb des :hover-Selektors verwenden:

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

Die Eigenschaft „background-size: cover“ stellt sicher, dass das aktualisierte Bild den gesamten Bereich des ausfüllt Element, um Überlappungen zu verhindern.

Alternativ können Sie JavaScript verwenden, um den Bildübergang zu handhaben. Mit diesem Ansatz können Sie das src-Attribut des Bildes direkt ändern:

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

Das obige ist der detaillierte Inhalt vonWie kann ich Bildüberlappungen verhindern, wenn ich Bilder beim Schweben mit CSS oder JavaScript ändere?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!