분류 css

호버된 형제 요소를 사라지게 합니다.

컨텐츠 정보

  • 조회 634 (작성일 )

본문

HTML : 

<div class="sibling-fade">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
  <span>Item 4</span>
  <span>Item 5</span>
  <span>Item 6</span>
</div>


CSS : 

span {
  padding: 0 1rem;
  transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}



css