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

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

DDD
Libérer: 2024-12-19 09:22:11
original
950 Les gens l'ont consulté

How Can I Prevent Image Overlap When Changing Images on Hover with CSS or 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">
Copier après la connexion
#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}
Copier après la connexion

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;
}
Copier après la connexion

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'" />
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal