Pourquoi mon image de survol se chevauche-t-elle au lieu de remplacer l'original ?

Modification de l'affichage de l'image avec le survol CSS/HTML

Lorsque vous essayez de remplacer une image par une autre lors du survol de la souris, il peut y avoir des cas où le l'image originale reste visible ou la nouvelle image ne parvient pas à ajuster ses dimensions, ce qui les fait se chevaucher. Voici un aperçu du problème et une solution possible.

Le code fourni présente le problème :

<img src="LibraryTransparent.png">

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

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

Dans ce code, définir l'image d'arrière-plan au survol garantit que la seconde l'image apparaît par-dessus la première mais peut ne pas être redimensionnée ou positionnée correctement.

Solution alternative : utiliser JavaScript

Une autre option consiste à utiliser JavaScript pour gérer le changement d'image :

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

Dans cette approche, un événement onmouseover change la source de l'image en alternative lorsque la souris survole , et un événement onmouseout rétablit la source à l'image d'origine lorsque la souris quitte. L'utilisation de JS offre un contrôle plus direct sur la manipulation des images, garantissant une transition transparente entre les images.

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!