Comment modifier l'apparence d'un élément en survolant un autre élément en CSS ?

Modifier l'apparence d'un élément lors du survol d'un autre à l'aide de CSS

Dans le domaine du style CSS, il est souvent souhaitable de modifier l'apparence d'un élément lorsque le curseur en survole un autre. Ceci peut être réalisé grâce à une combinaison de sélecteurs et de la pseudo-classe :hover.

Considérez le scénario suivant : vous avez un élément conteneur (par exemple, un div) et un élément caché (par exemple, un autre div) qui contient des informations supplémentaires. Lorsque la souris survole l'élément conteneur, vous souhaitez que l'élément masqué apparaisse et affiche son contenu.

Dans l'exemple fourni :

<div>
<pre class="brush:php;toolbar:false">a:hover + #hidden {
  background-color: orange;
  color: orange;
}

Malheureusement, cette approche ne fonctionne pas Cela ne fonctionne pas car le div #hidden n'est pas un enfant direct de l'élément a. Pour résoudre ce problème, assurez-vous que l'élément masqué est un enfant de l'élément sur lequel vous souhaitez déclencher l'effet de survol.

<div><p>Avec cette modification, le sélecteur a:hover #hidden identifiera correctement l'élément masqué. élément et appliquez les styles souhaités lorsque le curseur survole l'élément a.</p></div>