Wie man zwei Klassen gleichzeitig mit CSS

Question

übersetze Ich habe Probleme, Übergang auf zwei Klassen gleichzeitig zu übergehen, wenn ich über einen von ihnen schwebe.

.sv-logo { 
 
    opacity: 0.5; 
 
    transition: all .3s; 
 
} 
 

 
.nav{ 
 
    opacity: 0.5; 
 
    transition: all .3s 
 
} 
 

 
.sv-logo:hover, .sv-logo:hover + .nav{ 
 
    opacity: 1; 
 
    transition: all .3s; 
 
} 
 

 
.nav:hover, .nav:hover + .sv-logo{ 
 
    opacity: 1; 
 
    transition: all .3s; 
 
}

<div class="grid"> 
 
     <div class="sv-logo"> 
 
      <img id="logo1" src="images/logo.png" alt="logo">    
 
     </div> 
 
     <div class="nav"> 
 
      <nav> 
 
        <ul> 
 
         <li><a href="index.html">Portfolio</a></li> 
 
         <li><a href="index.html">About</a></li> 
 
         <li><a href="index.html">Contact</a></li> 
 
        </ul> 
 
      </nav> 
 
     </div> 
 
</div>

Die obige CSS funktioniert, wenn ich oben auf .sv-Logo schweben, verblassen beide Klassen in. Allerdings, wenn ich über .nav schweben, nur .nav Blendungen in.

Answer 1

Ihr Problem liegt in der Tatsache, dass das adjacent sibling selector nur das folgende Element auswählt. Es kann das vorherige Element nicht auswählen.

Betrachten wir in einem anderen Behälter einkapseln, vielleicht header

header { 
 
    opacity: 0.5; 
 
    transition: all .3s; 
 
} 
 

 

 

 
header:hover{ 
 
    opacity: 1; 
 
    transition: all .3s; 
 
}

<div class="grid"> 
 
    <header> 
 
    <div class="sv-logo"> 
 
     <img id="logo1" src="images/logo.png" alt="logo"> 
 
    </div> 
 
    <div class="nav"> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="index.html">Portfolio</a></li> 
 
      <li><a href="index.html">About</a></li> 
 
      <li><a href="index.html">Contact</a></li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </header> 
 
</div>

Sie auch Javascript verwenden könnte, die die DOM besser durchqueren können.