CSS: not()을 사용하여 모든 형제를 선택합니다.

저희 UX 팀에서는 마우스로 가리킨 항목을 강조 표시하는 대신 나머지 항목을 어둡게 하는 탐색 메뉴를 만들길 원했습니다.

CSS를 구출하세요!

CSS not() 의사 클래스를 사용하면 해결 방법이 매우 간단합니다.

HTML

<div class="menu-items">
  <div>Home</div>
  <div>About</div>
  <div>Contact</div>
  <div>Services</div>
  <div>Blog</div>
  <div>Portfolio</div>
</div>

SCSS

실제 기능에 집중할 수 있도록 스타일 속성을 제거했습니다.

1 .menu-items {    
2     visibility: hidden;
3 
4     & > * {
5         visibility: visible;
6         transition: opacity 500ms;
7     }
8 
9     &:hover > :not(:hover) {
10        opacity: 0.45;
11    }
12 }

.menu-items 클래스가 있는 컨테이너가 있습니다.
4번 줄에서는 해당 하위 요소를 모두 선택하고 여기에 불투명 애니메이션 전환을 추가합니다.

라인 #9는 not() 의사 클래스를 사용하여 모든 호버링되지 않은 요소의 불투명도를 더 낮은 값으로 설정하여 요소에 대한 호버 효과를 처리합니다.

가시성 속성은 어떻게 되나요?
.menu-items 컨테이너의 가시성을 숨김으로 설정한 다음 하위 요소를 다시 표시로 설정합니다. 이로 인해 요소 사이에 마우스를 가져가면 효과가 꺼집니다.

그렇습니다 :)

위 내용은 CSS: not()을 사용하여 모든 형제를 선택합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!