Maison >interface Web >tutoriel CSS >Pourquoi mon div ne change-t-il pas de couleur au survol, uniquement le lien qu'il contient ?

Pourquoi mon div ne change-t-il pas de couleur au survol, uniquement le lien qu'il contient ?

DDD
DDDoriginal
2024-11-03 18:43:02403parcourir

Why doesn't my div change color on hover, only the link inside it?

Changer la couleur d'arrière-plan d'un div au survol

Q : J'essaie de faire changer la couleur d'arrière-plan d'un div lorsque la souris le survole. J'ai essayé d'utiliser le code CSS fourni ci-dessous, mais seul le lien à l'intérieur du div change de couleur. Comment puis-je faire en sorte que l'ensemble du div change de couleur au survol ?

Code CSS :

the div {background: white;}
the div a:hover {background: grey; width: 100%; display: block; text-decoration: none;}

A : Le "a:hover" dans votre code CSS cible spécifiquement la balise , ce qui fait que seul le lien change de couleur en survol. Pour changer la couleur d'arrière-plan de l'ensemble du div, vous devez plutôt utiliser "le div:hover". Voici le code corrigé :

the div {background: white;}
the div:hover {background: grey;}

De plus, si vous souhaitez que le div entier fasse office de lien, vous pouvez ajouter une balise autour de lui avec l'adresse du lien souhaité :

<a href="link_address">
  <div style="background: white;">
    ...
  </div>
</a>

Notez que si vous souhaitez modifier uniquement un div spécifique, vous pouvez lui donner un identifiant ou une classe dans le HTML et le cibler en utilisant cet identifiant dans votre CSS.

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:
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