두 개 이상의 요소에 호버 이벤트 연결

Question

안녕하세요, hover 이벤트를 연결하여 관련 요소를 변경하는 것이 가능한지 궁금합니다. 예를 들어 링크 나 아이콘 위로 마우스를 가져 가면 동시에 두 스타일의 스타일이 변경됩니다. 지금 내 말대꾸/SCS들에서 나는 CSS를 가지고 :

.iconlinks { 
    color:$linkscolor; 

    &:hover { 
     color:darken($linkscolor,20%); 
    } 
}  
#icons { 
    a:hover { 
     i { 
      color: darken($primary-color, 20%); 
     } 
    } 
} 

HTML :

<div id="icons" class="row"> 
    <div class="medium-4 large-4 text-center column adjust"> 
     <a href="#"><i id="promotional" class="fi-calendar"></i></a> 
     <h4><a class="iconlinks" href="#">text</a></h4> 
     <p>Text ect</p> 
    </div> 
</div> 

그래서, 모두를위한 스타일을 변경됩니다 .iconlinks 또는 #icons 유혹하고 싶습니다. :before 및 :after과 같은 의사 요소를 사용하는 것에 대해 들었지만 실제 사용법을 이해하지 못했고 해당하는 경우 적용 할 수 없습니다. 그래서 이것을 달성하는 가장 좋은 방법은 무엇입니까?

는 또한 시도 :

 <div class="medium-4 large-4 text-center column adjust"> 
      <a class"dualhover" href="#"><i id="promotional" class="fi-calendar"></i> 
     <h4><a class="iconlinks" href="#">Promotional Items</a></h4></a> 

CSS :

.dualhover:hover{ 
#promotional{color: darken($linkscolor,10%);} 
.iconlinks{ 
color: darken($linkscolor,10%); 
} 
} 

내 코드가 혼란스러워하기 시작하고, 내가 정리해야합니다. 이것을하기위한 더 쉬운 방법이 있어야합니다.

Answer 1

#icons 호버로 이동하는 경우 전체 블록 (및 암시 적으로 .iconlinks)을 가리키고 있습니다. 그래서 당신은 약 .iconlinks:hover 상태를 걱정하지 않아도 [? 어쩌면 이것은 당신에게 도움이 될 것입니다]

가

#icons { 
    .iconlinks { 
     color:$linkscolor; 
    } 
    &:hover { 
     .iconlinks { 
      color:darken($linkscolor,20%); 
     } 
     a i { 
      color: darken($primary-color, 20%); 
     } 
    } 
}