CSS의 hover 요소에 After Effects를 적용하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS의 hover 요소에 After Effects를 적용하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-10-27 02:30:02

원래의

576명이 탐색했습니다.

How to Apply :after Effects to :hover Elements in CSS?

:after와 :hover를 효과적으로 결합하는 방법

CSS를 활용할 때 :after와 :hover 의사 선택기를 결합하는 것이 가능합니다. 역동적인 효과를 만들어 보세요. 그러나 이를 달성하는 것은 어려울 수 있습니다.

:after를 사용하여 화살표 모양을 추가하는 선택된 클래스로 목록이 향상되는 제공된 코드를 고려해 보세요. 목표는 마우스를 올려놓은 항목에 동일한 화살표 모양을 적용하는 것입니다.

#alertlist {
  list-style: none;
  width: 250px;
}

#alertlist li {
  padding: 5px 10px;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
}

#alertlist li.selected,
#alertlist li:hover {
  color: #f0f0f0;
  background-color: #303030;
}

#alertlist li.selected:after {
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #303030;
  content: "";
}

로그인 후 복사

:after 효과를 :hover와 결합하려면 간단히 다음에서 #alertlist li:hover 선택기에 :after를 추가하면 됩니다. #alertlist li.selected:

#alertlist li.selected:after, #alertlist li:hover:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

로그인 후 복사

이제 이렇게 하면 선택한 클래스가 있는 목록 항목과 마우스를 가져가는 항목 모두에 화살표 모양이 나타납니다.

위 내용은 CSS의 hover 요소에 After Effects를 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!