[html/css] :not(:hover)

:not

 

:not(선택자)는 괄호 안에 있는 선택자를 제외한 나머지 형제나 자식을 선택한다.

 

아래는 사용 예시이다.

<ul>
	<li><a href="#">소개</a></li>
	<li><a href="#">이야기</a></li>
	<li><a href="#">기술과 서비스</a></li>
	<li><a href="#">약속과 책임</a></li>
</ul>

/* ul 안에 li 중 마우스오버(hover)한 li를 제외한 나머지 li의 a 태그의 색상을 #888로 바꿔라 */
ul:hover li:not(:hover) a {
  color: #888;
}

 

마우스를 올리지 않았을 때

마스를 메뉴에 올렸을 때