선택 및 마우스오버된 목록 항목에 대한 화살표 표시기 스타일을 지정하는 방법은 무엇입니까?

:after 및 :hover를 결합하여 화살표 표시기 스타일 지정

:after와 :hover를 결합하여 다음에 대한 화살표 표시를 만드는 것을 목표로 합니다. 목록 항목. 항목을 선택하거나 위에 마우스를 올리면 이 화살표가 나타납니다.

제공된 코드에서 :after를 사용하여 선택한 항목에 대한 화살표 표시 스타일을 올바르게 지정했습니다. 마우스를 올린 항목에 동일한 스타일을 적용하려면 :hover 선택기에 :after를 추가하면 됩니다.

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

<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>

이 수정된 코드는 화살표 표시가 두 항목 모두에 표시되도록 합니다. 의도한 대로 선택 및 마우스오버된 목록 항목에 대해

위 내용은 선택 및 마우스오버된 목록 항목에 대한 화살표 표시기 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!