: 활성 : 동시에 모두 활성화 된 호버 스택

현재 내 디자인 중 하나에 문제가 있습니다. : 호버 CSS 요소를 사용하여 호버 단추를 만든 다음이를 확인하십시오 : active 요소를 사용하여 동일하게 유지됩니다.: 활성 : 동시에 모두 활성화 된 호버 스택

그러나 : hover 및 : active는 각각의 CSS 규칙에 지정된 패딩을 가지고 있습니다.이 규칙은 버튼 위에 올려 놓은 상태에서 버튼을 클릭 할 때 문제가 발생합니다. 패딩 스택과 버튼은 완전히 잘못 배치됩니다.

이 문제를 방지하려면 어떻게해야합니까?

출처

2013-05-13 Ryan

사람들은 의사 클래스가 아닌 요소가 있습니다. HTML은 요소를 가지고 있지만 CSS는 그렇지 않습니다. – Quentin

선호하는 길이/크기로'채움 '을 설정하는': hover : active'에 대한 규칙을 정의하십시오. –

캐스케이드가 작동하는 방식은 같은 요소에 패딩을 설정하는 두 가지 규칙을 결합하는 것을 불가능하게 만듭니다. 캐스케이드의 마지막 규칙은 이전 규칙을 무시합니다. 나는 그 효과를 얻을 수있는 몇 가지 가능한 상황을 생각할 수 있지만, 그 중 어느 것이 해당되는지를 판별하기 위해 완전한 감소 된 테스트 케이스를 보여 주어야합니다. – Quentin

이게 무슨 뜻인가요? (가리 키기/활성을 보려면 div를 클릭하십시오).

HTML :

<div class="a">Some content</div>

CSS :

.a{ 
    display:block; 
    padding:5px; 
} 
.a:hover{ 
    padding:5px; 
    background:red; 
} 
.a:active{ 
    padding:5px; 
    background:blue; 
}

예 : http://jsfiddle.net/justincook/JsWCF/

출처

2013-05-13 19:56:07 Justin

나는 누가 이것을 downvoted했는지 모르겠지만 OP의 전제가 실제로 일어나지 않는다는 것은 아주 명확한 예입니다. 잘 했어. –

게시물을 게시 한 이후로 오류를 수정했습니다. 답변으로 받아들이는 이유는 분명히 내가 어딘가에서 엉망인 것을 보여주기 때문입니다. – Ryan

: 활성 : 동시에 모두 활성화 된 호버 스택

답변

관련 문제