Pourquoi seul le lien à l'intérieur de mon div change-t-il de couleur lorsque je le survole ?

Comment changer la couleur d'arrière-plan d'un div entier en survol

Vous essayez de modifier la couleur d'arrière-plan d'un div lorsque la souris survole il. Cependant, vous avez remarqué que seul le lien à l'intérieur du div change de couleur.

Cause du problème

La règle CSS "a:hover" que vous avez définie spécifiquement cible le élément dans le div. Cette règle ne modifie l'élément de lien qu'au survol de la souris.

Solution

Pour changer la couleur d'arrière-plan de l'ensemble du div, vous devez appliquer la règle de survol au div lui-même. Remplacez le CSS "a:hover" par "div:hover". Voici un exemple :

<code class="css">div {
  background: white;
}
div:hover {
  background: gray;
}</code>

Rendre l'intégralité du div cliquable

Pour rendre l'intégralité du div cliquable, vous pouvez le convertir en lien à l'aide du bouton étiqueter. Enveloppez votre contenu div dans une balise d'ancrage et fournissez l'URL de destination appropriée. Par exemple :

<code class="html"><a href="https://example.com">
  <div>
    Click Me!
  </div>
</a></code>

Remarques supplémentaires :

• Pour appliquer l'effet de survol à un div spécifique, attribuez-lui un identifiant unique (par exemple, < div id="myDiv">) et utilisez le sélecteur CSS "#myDiv:hover {...}"
• Pour un groupe de divs, créez une classe (par exemple,
  ) et utilisez le sélecteur CSS ".myClass {...}"

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!