CSS에서 :after를 사용하여 선택한 항목과 마우스를 올린 항목의 스타일을 모두 지정하는 방법은 무엇입니까?

CSS에서 :after와 :hover 결합

CSS는 :after 의사 요소와 :hover 의사 요소의 강력한 조합을 제공합니다. 클래스를 통해 개발자는 동적 스타일 효과를 만들 수 있습니다. 이 특정 질문은 항목을 선택하고 그 위로 마우스를 가져갈 때 항목에 동일한 스타일을 적용하는 것과 관련이 있습니다.

제공된 코드는 항목 목록을 보여줍니다. 여기서 선택한 항목("선택됨" 클래스 포함)에는 화살표가 표시됩니다. :after를 사용하여 모양을 만듭니다. 문제는 마우스를 가져가는 항목에 대해 이 동작을 복제하는 것입니다.

응답에서 제안된 해결책은 #alertlist li.selected와 함께 사용되는 것과 동일한 방식으로 #alertlist li:hover 선택기에 :after를 추가하는 것입니다. . 이렇게 하면 선택한 항목과 마우스로 가리킨 항목 모두에 동일한 스타일이 적용됩니다.

업데이트된 코드는 다음과 같습니다.

<code class="css">#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: "";
}</code>

이 변경 사항을 구현하면 이제 선택한 항목뿐만 아니라 화살표 모양이 나타납니다. 항목뿐만 아니라 마우스를 올려 놓은 항목에 대해서도 사용자에게 일관된 시각적 신호를 제공합니다.

위 내용은 CSS에서 :after를 사용하여 선택한 항목과 마우스를 올린 항목의 스타일을 모두 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!