Wie verhindert man Bildüberlappungen beim Hover mithilfe von CSS und HTML?

Bildüberlappung beim Schweben mit CSS/HTML beheben

Beim Versuch, ein Bild beim Schweben mit CSS und HTML zu ändern, kommt es nicht selten zu Problemen mit dem Originalbild bleibt sichtbar oder das neue Bild erscheint falsch skaliert. So lösen Sie dieses Problem:

In Ihrem HTML-Code haben Sie ein Element mit der ID „Bibliothek“:

<img src="LibraryTransparent.png">

Und in Ihrem CSS haben Sie die folgenden Stilregeln:

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

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

Das Problem hierbei ist, dass Sie den Hintergrund ändern Wenn Sie für den Hover-Status ein Bild hinzufügen, wird das Originalbild nicht ausgeblendet. Um dies zu beheben, können Sie die Anzeigeeigenschaft verwenden, um das Originalbild beim Schweben unsichtbar zu machen:

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

Alternativ können Sie JavaScript verwenden, um das src-Attribut des zu ändern. Element beim Hover:

document.getElementById("Library").onmouseover = function() {
  this.src = 'LibraryHoverTrans.png';
};

document.getElementById("Library").onmouseout = function() {
  this.src = 'LibraryTransparent.png';
};

Durch die Implementierung einer dieser Lösungen können Sie sicherstellen, dass das Originalbild ausgeblendet wird und das neue Bild korrekt skaliert angezeigt wird, wenn Sie mit der Maus über das Bild fahren.

Das obige ist der detaillierte Inhalt vonWie verhindert man Bildüberlappungen beim Hover mithilfe von CSS und HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!