Comment puis-je empêcher le chevauchement des images lors de la modification des images au survol avec CSS ou JavaScript ?

Personnalisation de l'apparence de l'image au survol avec HTML, CSS et JavaScript

Lorsque vous traitez les transitions d'image au survol, vous pouvez rencontrer un problème courant où l'image sous-jacente reste visible et l'image mise à jour ne s'ajuste pas à la hauteur et à la largeur souhaitées, provoquant un chevauchement.

Dans votre extrait de code :

<img src="LibraryTransparent.png">

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

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

Votre tentative de modification de l'image d'arrière-plan est correcte. Cependant, pour résoudre les problèmes de hauteur et de largeur, vous pouvez utiliser les propriétés CSS suivantes dans le sélecteur :hover :

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

La propriété background-size: cover garantit que l'image mise à jour remplit tout l'espace du élément, empêchant le chevauchement.

Vous pouvez également utiliser JavaScript pour gérer la transition de l'image. Cette approche permet de changer directement l'attribut src de l'image :

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

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!