동일한 클래스 이름을 가진 여러 요소 중 하나에만 적용되는 CSS 부분

간단한 레이아웃으로 작업 중이며 재미있는 CSS 문제가 발생했습니다.동일한 클래스 이름을 가진 여러 요소 중 하나에만 적용되는 CSS 부분

는 둘 다 '버튼'의 클래스와, 내 CSS에서 내가 그러나 커서 결코 첫 번째 단추를 들어, 두 번째 버튼에 적용되는 CSS 규칙을 모두

.button { 
    cursor: pointer; 
    background-color: #888; 
    border: solid 1px #555; 
    padding: .5em 1em .5em 1em; 
    font-weight: bold; 
} 
.button:hover { 
    color: #eee;  
    background-color: #999; 
    border: solid 1px #777; 
}

이 두 개의 버튼을 가지고 호버 블록 전체가 적용되지 않습니다.

Here is an example of what i'm talking about

출처

2011-08-30 rlemon

Chrome에서 제대로 작동합니다. – Kyle

FireFox 6.0에서 테스트 중이 었습니다. 죄송합니다. 그러나 당신이 아래에 읽은 경우 .. 고정 :) – rlemon

좋아, 찾을 수 내 문제! 미안 해요.

관심있는 사람들을위한

.... 가 나는 왼쪽에있는 버튼을 오버레이하고, 따라서

를 '유혹'에서 커서를 차단 된 페이지의 헤더 텍스트에 CSS 규칙을 적용했다 http://jsfiddle.net/rlemon/VdmS9/2/

출처

2011-08-30 12:56:35 rlemon

스타일이 올바르게 적용되면 버튼에만 h3 요소가 적용됩니다. 추가해주세요 position:relative; z-index:1; fiddle을 업데이트했습니다.

출처

2011-08-30 12:57:39 Litek

고마워, 나는 그 자신을 발견했다 :) 나는 그 클래스에서 위치와 최고 규칙을 제거 할 수 있습니다, 그들은 필요하지 않습니다. 상단과 하단 막대가 어떻게 배치 될 것인지를 변경하기 전에 처음에는 거기에있었습니다. – rlemon

동일한 클래스 이름을 가진 여러 요소 중 하나에만 적용되는 CSS 부분

답변

관련 문제