Comment puis-je modifier une source d'image en survol à l'aide de HTML, CSS et JavaScript ?

Modification de la source de l'image au survol à l'aide de HTML, CSS et JavaScript

Pour modifier l'URL source d'un fichier <img> balise lors du survol, diverses approches peuvent être adoptées.

CSS uniquement (spécifique au Webkit)

En utilisant CSS seul, vous pouvez remplacer l'image par une URL différente sur flotter. Cependant, cela ne fonctionne que dans les navigateurs basés sur Webkit comme Google Chrome :

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Utilisation d'une image d'arrière-plan Div

Vous pouvez également utiliser une image d'arrière-plan

élément avec une image d'arrière-plan remplacée au survol :

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

À l'aide de JavaScript

Avec JavaScript, vous pouvez définir dynamiquement la source de l'élément <img> tag au survol et à la sortie de la souris :

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

<img>

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!

JavaScript css chrome html webkit using background

Déclaration：

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