Pouvez-vous modifier le CSS au survol pour des éléments non liés ?

Pouvez-vous modifier le CSS d'une classe différente en survol ?

De nombreux développeurs rencontrent le besoin de modifier le CSS d'un élément lorsqu'un autre un élément sans rapport est survolé. CSS seul pose souvent des limites pour y parvenir, ce qui incite à l'exploration de solutions potentielles.

Solutions CSS

Heureusement, CSS propose deux approches efficaces pour cette tâche :

1. F en tant qu'enfant de E : Si l'élément dont vous souhaitez modifier le CSS (F) est un élément enfant de l'élément survolé (E), utilisez :

   .item:hover .wrapper {
       /* CSS modifications for element F */
   }

2. F en tant que frère ou sœur de E : Si F n'est pas un enfant de E, mais plutôt un frère ou une sœur ultérieur ou son descendant dans le DOM (apparaissant après E dans le balisage), utilisez :

   .item:hover ~ .wrapper {
       /* CSS modifications for element F */
   }

Alternative JavaScript

Bien que JavaScript soit généralement déconseillé pour des tâches aussi simples, il offre une approche alternative :

document.getElementsByClassName('item')[0].onmouseover = () => {
    document.getElementsByClassName('wrapper')[0].style.backgroundColor = "url('some url')";
};

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!