내 CSS 호버 코드가 내 링크에 밑줄을 표시하지 않는 이유는 무엇입니까?

CSS의 'hover' 이해

CSS 작업 시 'hover'는 마우스 상호작용 시 요소 스타일을 수정하는 데 중요한 개념입니다. 그러나 원하는 결과를 얻으려면 올바른 구현이 필요합니다.

'hover' Enigma

최근 다음 코드에서 마우스를 올리면 링크에 밑줄을 표시할 수 없다는 문의가 발생했습니다.

<a class="hover">click</a>

a .hover:hover {
    text-decoration: underline;
}

솔루션 공개

문제를 해결하려면 '호버'가 의사 요소. 올바른 구문은 다음과 같습니다.

a:hover {
    text-decoration: underline;
}

또는 클래스 이름을 선호하는 경우:

a.hover:hover {
    text-decoration: underline;
}

'hover' 클래스 이름

클래스를 사용하는 동안 -'hover'와 같은 이름은 중복된 것처럼 보일 수 있습니다. 별도의 CSS 규칙을 활용하여 마우스를 올리면 여러 속성을 전환하려는 상황에 적용할 수 있습니다. '.호버'. 그러나 유일한 의도가 마우스 오버 시 링크에 밑줄을 긋는 것이라면 a:hover 선택기가 여전히 선호되는 선택입니다.

위 내용은 내 CSS 호버 코드가 내 링크에 밑줄을 표시하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!