Comment échanger de manière transparente des images en survol à l'aide de CSS ou de JavaScript ?

Comment échanger dynamiquement des images au survol à l'aide de CSS/HTML

Lors de la configuration des images pour qu'elles changent dynamiquement lorsque la souris survole, il est crucial de aborder certaines nuances pour garantir l’obtention de l’effet souhaité. Un problème courant survient lorsque l'image d'origine persiste et chevauche la nouvelle, alors que la hauteur et la largeur peuvent ne pas s'ajuster en conséquence.

Extrait de code :

Considérez cet exemple HTML /Code CSS :

<img src="LibraryTransparent.png">

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

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

L'utilisation de l'image d'arrière-plan dans l'état :hover est une approche pour modifier dynamiquement le image. Cependant, une solution supplémentaire peut être utilisée à l'aide de JavaScript :

Option JavaScript :

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

Dans ce scénario, JavaScript est utilisé pour échanger la source de l'image lorsque le curseur de la souris survolez-le et restaurez-le en sortant la souris. Cette méthode garantit que l'image originale disparaît et que la nouvelle la remplace de manière transparente, évitant ainsi tout problème de chevauchement ou de dimensionnement.

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!