Comment empêcher le chevauchement des images lors du survol à l'aide de CSS et HTML ?

Correction du chevauchement des images au survol avec CSS/HTML

Lorsque vous essayez de modifier une image au survol à l'aide de CSS et HTML, il n'est pas rare de rencontrer des problèmes où l'image d'origine reste visible ou la nouvelle image apparaît mal mise à l'échelle. Voici comment résoudre ce problème :

Dans votre HTML, vous avez un élément avec l'ID "Bibliothèque":

<img src="LibraryTransparent.png">

Et dans votre CSS, vous avez les règles de style suivantes :

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

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

Le problème ici est que pendant que vous modifiez l'arrière-plan image pour l'état de survol, vous ne cachez pas l'image d'origine. Pour résoudre ce problème, vous pouvez utiliser la propriété display pour rendre l'image originale invisible au survol :

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

Vous pouvez également utiliser JavaScript pour modifier l'attribut src du fichier élément en survol :

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

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

En implémentant l'une de ces solutions, vous pouvez vous assurer que l'image d'origine est masquée et que la nouvelle image apparaît correctement à l'échelle lorsque vous survolez l'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!