CSS peut-il affecter l'opacité d'un élément lors du survol d'un autre élément ?

Les éléments peuvent-ils s'influencer mutuellement lors du survol de différents éléments ?

Problème :

Le le but est de modifier l'opacité d'un élément (#thisElement) en survolant un autre (img) sans utiliser JavaScript.

Fonctionnalité souhaitée :

Lorsque vous survolez « img », l'opacité de « img » doit augmenter à 100 %, tandis que l'opacité de « #thisElement » devrait diminuer à 30%.

CSS Limitations :

Malheureusement, CSS seul ne peut pas obtenir cet effet car il n'a pas la capacité d'appliquer des styles à un élément en fonction du survol d'un élément différent.

Options pour Affectant les éléments voisins :

Cependant, CSS peut modifier le style des éléments liés au survol element:

• Descendants : Appliquer des styles aux éléments enfants ou imbriqués. Exemple :

  #parent_element:hover #child_element {
    opacity: 0.3;
  }

  Copier après la connexion

• Frères et sœurs adjacents : Affecte les éléments qui suivent ou précèdent immédiatement l'élément survolé. Exemple :

  #first_sibling:hover + #second_sibling {
    opacity: 0.3;
  }

  Copier après la connexion

Solution proposée :

Basé sur la structure HTML donnée, où « img » a des frères et sœurs immédiatement en dessous sans imbrication , vous pouvez utiliser le sélecteur de frère adjacent :

img:hover + img {
    opacity: 0.3;
    color: red;
}

Cette règle CSS ajustera l'opacité du Éléments 'img' adjacents à l'élément 'img' survolé.

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!