Comment utiliser :hover pour modifier le CSS d'une classe différente ?

Comment utiliser :hover pour modifier le CSS d'une autre classe

Il existe des cas où vous souhaiterez peut-être modifier le CSS d'une classe en survolant un élément d'une autre classe en utilisant uniquement CSS. Cette technique est particulièrement utile si vous souhaitez créer des effets visuellement attrayants sans recourir à JavaScript.

Solutions CSS uniquement :

Pour obtenir cet effet en utilisant CSS seul, il Il existe deux approches principales :

• L'élément que vous souhaitez modifier (F) est soit un élément enfant de l'élément sur lequel vous survolez (E), soit
• F est un élément ultérieur- frère ou sœur descendant de E (E apparaît dans le balisage/DOM avant F).

Première option : F en tant qu'enfant de E

Si F est un élément enfant de E, vous pouvez utiliser le sélecteur CSS suivant :

<code class="css">.item:hover .wrapper {
    color: #fff;
    background-color: #000;
}</code>

Ce sélecteur appliquera les règles CSS spécifiées à l'élément .wrapper uniquement lorsque l'élément .item est survolé.

Deuxième option : F en tant que frère de E

Si F est un élément frère de E, vous pouvez utiliser le sélecteur CSS suivant :

<code class="css">.item:hover ~ .wrapper {
    color: #fff;
    background-color: #000;
}</code>

Ce sélecteur appliquera les règles CSS à l'élément .wrapper uniquement lorsque l'élément .item est survolé, en supposant que .wrapper est un frère direct de .item. Vous pouvez également utiliser .item:hover .wrapper si .wrapper est un frère immédiat de .item sans aucun autre élément entre eux.

Solution JavaScript :

Si vous ne peut pas obtenir l’effet souhaité en utilisant uniquement CSS, vous pouvez recourir à JavaScript. Voici un exemple simple :

<code class="javascript">document.getElementsByClassName('item')[0].onmouseover = function() {
    document.getElementsByClassName('wrapper')[0].style.background = "url('some url')";
};</code>

Ce code JavaScript modifiera la propriété background de l'élément .wrapper lorsque l'élément .item sera survolé. Notez que cette solution n'est pas aussi efficace ou élégante que les approches CSS uniquement.

Conclusion :

En utilisant CSS ou JavaScript, vous pouvez modifier le CSS d'une classe basé sur le survol d’une autre classe. Les solutions CSS uniquement sont préférables en raison de leur efficacité et de leur simplicité, mais JavaScript peut être utilisé dans les cas où CSS n'est pas suffisant.

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!