호버 시 버튼 색상 변경: 대체 해결 방법

호버 시 버튼 색상을 변경하려고 할 때 다음과 같은 경우 실망스러울 수 있습니다. 솔루션이 원하는 효과를 내지 못합니다. 제공된 샘플 코드를 고려하십시오.

a.button {
   ...
}
a.button a:hover{
     background: #383;
}

이 솔루션은 "버튼" 클래스가 있는 요소 내에서 링크를 마우스로 가리키면 링크의 배경색을 변경하려고 시도합니다. 그러나 선택기가 올바르지 않아 작동하지 않습니다.

호버 시 버튼 색상을 효과적으로 변경하려면 올바른 구문은 다음과 같습니다.

a.button:hover{
     background: #383;
}

이 경우 선택기 "a.button:hover"는 "버튼" 링크 위에 마우스를 올렸을 때 "버튼" 링크 자체를 대상으로 하여 의도한 색상 변경을 허용합니다.