Maison > interface Web > tutoriel CSS > CSS peut-il affecter l'opacité d'un élément lors du survol d'un autre élément ?

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

DDD
Libérer: 2024-12-09 17:43:11
original
890 Les gens l'ont consulté

Can CSS Affect One Element's Opacity When Hovering Over a Different Element?

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;
}
Copier après la connexion

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!

Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal