Comment modifier correctement une image en survol avec CSS ou JavaScript ?

Modification de l'apparence de l'image au survol à l'aide de CSS/HTML

Vous pouvez rencontrer un problème lorsque vous avez défini une image pour afficher une image différente image lorsque la souris survole, mais l'image d'origine est toujours visible et la nouvelle image se chevauche ou ne change pas de taille. Pour les débutants en HTML/CSS, cette tâche apparemment simple peut présenter un défi.

Pour résoudre ce problème, assurez-vous que l'image d'origine est correctement définie pour être transparente à l'aide d'un fichier image transparent. De plus, vérifiez que vos règles CSS ciblent le bon élément à l'aide de la syntaxe de sélection appropriée :

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

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

Cependant, si l'utilisation de CSS ne résout pas le problème, vous pouvez envisager une méthode alternative utilisant JavaScript :

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

Dans ce code JavaScript, les événements onmouseover et onmouseout sont utilisés pour modifier dynamiquement la source de l'image en fonction de l'interaction de la souris.

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!