css group hover 적용 방법

설명 이유 

보통 그룹으로 지정할 것도 없이 동시에 적용을 할려면 클래스 name을 가지고 와서 , 구분한다음 한번에 이벤트를 적용하면 됬지만 hover이나 동작에 대한 이벤트를 줄때에는 별도로 설정해야한다는 것을 알게 되어서 정리하게 되었습니다. 

 

예시 코드 

<div className = "test-group">
    <li>테스트</li>
    <h1>적용</h1>
    <h2>미적용</h2>
</div>

조건 

li테그에 테스트에 마우스를 갖다대면 h1테그 적용부분도 동시에 hover 적용해서 글자가 빨간색으로 변하게 만들어보세요 

 

css 

.test-group:hover li,
.test-group:hover h1 {
  color: red;
}

설명) 먼저 적용하고자하는 범위에 상위에 있는 클래스를 가지고 와서 hover을 적용하고 그다음에는 상세 적용할 부분을 지정하면 됩니다.

 

회고)

이 방법을 몰랐을경우 hover을 동시에 적용하고자 할 때 그 부분을 따로 테그로 묶어서 그 영역에 클래스 전체에 hover을 줬을텐데 그럼 퍼블릭 수정할 때에는 코드가 지저분해질 수 밖에 없었습니다.

그런데 이렇게 상위 클래스를 지정해서 적용하고자 하는 부분만 가지고 와 hover을 적용하니 좀 더 코드가 클린해는 것을 볼 수 있었습니다.