CSS3 모양이 겹쳐서 표시됨

Question

좋아요. CSS3를 통해 만들어진 모양과 상호 작용하는 것과 관련된 잠재적 인 까다로운 질문이 있습니다. 다음 바이올린을 참조하십시오 http://jsfiddle.net/MH4LN/1/

코드 예제 : 다음 CSS와

<div class="container"> 
    <div class="l1"></div> 
    <div class="l2"></div> 
    <div class="l3"></div> 
</div> 

:

.container { 
    width: 570px; height: 570px; 
    position: relative; 
} 
.l1 { 
    width: 352px; 
    height: 352px; 
    background: red; 

    position: absolute; 
    top: 109px; 
    left: 109px; 
    z-index: 999; 

    -webkit-border-radius: 176px; 
    border-radius: 176px; 
} 
.l2 { 
    width: 464px; 
    height: 464px; 
    background: blue; 

    position: absolute; 
    top: 53px; 
    left: 53px; 
    z-index: 998; 

    -webkit-border-radius: 232px; 
    border-radius: 232px; 
} 
.l3 { 
    width: 570px; 
    height: 570px; 
    background: green; 

    position: absolute; 
    z-index: 997; 

    -webkit-border-radius: 285px; 
    border-radius: 285px; 
} 

.l1:hover, .l2:hover, .l3:hover { 
    background: #fff; 
} 

내 문제는 이것이다 : 내가 가져가 각 모양에 CSS를 적용 할. 셰이프는 테두리 폭을 div 너비/높이의 절반 크기로 설정하여 만듭니다 (원을 만듭니다). 그러나 반경에 의해 숨겨진 빈 영역 위로 마우스를 가져 가면 해당 요소에서 여전히 호버 상태가 트리거됩니다.

이를 방지 할 수있는 방법이 있나요 : 여기가 무슨 뜻인지 설명 할 수있는 이미지입니까? 간단한 둥근 div 대신 canvas 요소를 사용해야합니까?

편집 : Firefox에서 작동하므로 웹킷 브라우저에만 해당되는 것 같습니다.

편집 2 : Niels의 솔루션이 맞으면 받아 들일 것입니다. 상자 모델은 요소가 직사각형임을 나타냅니다. 따라서이 방식은 잘못되었습니다. 그러나 나는 SVG에 필요한 것을 성취 할 수 있었다. CSS의 표준이 레벨 2 나 3가 정의하는 모든이 동작을 정의하지 http://jsfiddle.net/uhrHX/1/

Answer 1

됩니다 :

: 여기 사람이 관심이 경우 예를 들어 바이올린입니다 의사 클래스 마우스를 사용하는 동안 적용 포인팅 장치를 사용하여 요소를 지정하지만 반드시 활성화 할 필요는 없습니다. 예를 들어 시각적 사용자 에이전트는 커서 (마우스 포인터)가 요소에 의해 생성 된 상자를 가리키면이 의사 클래스를 적용 할 수 있습니다.

CSS 상자 모델에는 모든 블록 요소가 직사각형 상자를 형성한다는 내용이 명시되어 있습니다. 텍스트가 div 주위에 순환 방식으로 떠오르지 않는 것처럼, 모든 의도와 목적을 위해 서클은 레이아웃이 직사각형이며 Webkit에서는 동작합니다. Gecko 개발자들은 호버의 경계 반경을 존중할 수있는 추가 마일을 확보 한 것으로 보입니다.하지만 경계와 같은 시각적 변화가있는 배경 등에서의 '틈'때문에이 작업을 수행하지 않으므로 실제로 일관성이 없습니다. .

즉, CSS 표준이 동작을 정의하지 않기 때문에 브라우저 동작이 변경되지 않을 것으로 기대하지 마십시오. 크로스 브라우저를 제대로 구현하는 유일한 방법은 Javascript와 마우스 위치에 대한 영리한 피타고라스 계산입니다.