CSS의 의사 요소에 호버 효과를 어떻게 추가할 수 있나요?

의사 요소에 대한 호버 효과

문제: 의사 요소에 호버 효과 추가

HTML 및 CSS에서 의사 요소를 사용할 때 다음을 수행하는 것이 바람직할 경우가 많습니다. 사용자 상호 작용을 향상시키기 위해 호버 효과를 추가합니다. 그러나 의사 요소에 대한 호버 효과를 직접 생성하는 것은 어려울 수 있습니다.

해결책: 상위 요소를 통한 호버 효과

대신 상위 요소를 대상으로 지정하여 의사 요소에 대한 호버 효과를 얻을 수 있습니다. 방법은 다음과 같습니다.

#button:before {
    /* Pseudo element styles */
}

#button:hover:before {
    /* Hover effect styles for pseudo element */
}

이 코드에서 #button:before는 의사 요소의 초기 스타일을 정의하고, #button:hover:before는 호버 효과 스타일을 지정합니다. 상위 요소(#버튼) 위에 마우스를 올리면 유사 요소에 호버 효과가 적용됩니다.

예제 코드

다음 HTML 설정을 고려하세요.

<div>

해당 CSS:

#button {
    color: #fff;
    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#button:hover:before {
    background-color: red;
}

이 코드는 텍스트 앞에 파란색 사각형이 있는 버튼을 표시합니다. 버튼 위로 마우스를 가져가면 사각형이 빨간색으로 변합니다.

위 내용은 CSS의 의사 요소에 호버 효과를 어떻게 추가할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!