CSS를 사용하여 두 클래스를 동시에 전환하는 방법

Question

두 클래스 중 하나를 가리키면 두 클래스에서 동시에 페이드 인을 전환하는 데 문제가 있습니다. 내가 .sv 로고 위에 마우스를 가져 가면 위의 CSS 작동

.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>

, 두 클래스는 페이드. 그러나, 나는에 .nav 이상 만 .nav 페이드를 가져 가면.

Answer 1

adjacent sibling selector은 요소 다음에 만 선택한다는 사실에 있습니다. 이전 요소를 선택할 수 없습니다.

당신은 또한 더 나은 DOM을 통과 할 수 자바 스크립트를 사용할 수 어쩌면 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>

, 다른 용기에 캡슐화하는 것이 좋습니다.