분류 css

Sibling fade 이웃 엘리먼트 사라지게..

컨텐츠 정보

  • 조회 798 (작성일 )

본문

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