마우스가 멀어진 후에도 CSS Hover 상태가 지속되도록 하려면 어떻게 해야 합니까?

호버 후 CSS 호버 상태 유지

웹 디자인에서 호버 상태를 사용하면 사용자가 위로 마우스를 가져갈 때 페이지의 요소가 변형될 수 있습니다. 그들을. 그러나 어떤 경우에는 사용자의 마우스가 요소를 떠난 후에도 호버 상태가 지속되는 것이 바람직합니다.

다음 코드 조각을 고려하세요.

#about {
  height: 25px;
  width: 84px;
  background-image: url('about.png');
  position: absolute;
  top: 200px;
  left: 0px;
}

#onabout {
  height: 200px;
  width: 940px;
  position: absolute;
  top: 60px;
  left: 0px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 300;
  display: none;
}

#about:hover #onabout {
  display: block;
}

이 코드는 :hover를 사용합니다. 마우스를 다른 요소(#about) 위로 가져갈 때 해당 요소(#onabout)를 표시하는 의사 클래스입니다. 그러나 사용자가 마우스를 #about에서 멀리 이동하면 #onabout이 사라집니다.

호버 상태를 유지하기 위해 CSS는 몇 가지 옵션을 제공합니다. 한 가지 접근 방식은 전환 속성을 도입하는 것입니다.

#about {
  ...
  transition: 0.2s ease;
}

#about:hover #onabout {
  transition: 0.2s ease;
  opacity: 1;
}

이 코드는 #about 위로 마우스를 가져갈 때 부드러운 전환 효과를 추가합니다. 불투명도 속성도 수정되어 마우스가 #about을 떠난 후에도 #onabout이 계속 표시되도록 합니다.

또 다른 접근 방식은 :active 의사 클래스를 사용하는 것입니다.

#about {
  ...
  cursor: pointer;
}

#about:hover #onabout {
  display: block;
}

#about:active #onabout {
  opacity: 1;
  transition: 0.2s ease;
}

이 코드는 커서를 사용하여 #about을 클릭할 수 있음을 나타내고 :active를 사용하여 요소를 클릭할 때 호버 상태를 유지합니다. 전환은 원활한 시각적 경험을 보장합니다.

마지막으로, 더 발전된 솔루션을 원하는 사람들을 위해 CSS3는 animation-play-state 속성을 제공합니다.

#onabout {
  display: block;
  animation-name: hover;
  animation-play-state: paused;
}

#about:hover #onabout {
  animation-play-state: running;
}

이 코드는 @keyframes hover 선언은 기본적으로 일시중지됩니다. 사용자가 #about 위로 마우스를 가져가면 animation-play-state가 실행 중으로 설정되어 애니메이션을 시작하고 마우스가 요소를 떠난 후에도 마우스 오버 상태를 유지합니다.

위 내용은 마우스가 멀어진 후에도 CSS Hover 상태가 지속되도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!