요소의 패딩 (또는 경계)을 클릭 해제 할 수 없게 할 수 있습니까?

Question

PNG 배경 이미지로 스타일을 지정하는 라디오 버튼이 두 개 있습니다. :hover을 사용하여 주변의 후광이있는 배경 이미지를 바꿔 넣습니다. 인접한 라디오 버튼의 후광 영역이 겹치므로 클릭 가능 영역의 일부가되어서는 안됩니다. 그러나 그들은 여전히 ​​같은 이미지의 일부입니다.

이상적으로는 패딩 영역 뒤에 후광을 표시하고 싶기 때문에 클릭 할 수 있도록 각 라디오 버튼의 콘텐츠 영역이 필요하지만 이 아닌 패딩은입니다. 이걸 제어하는 ​​CSS 속성을 찾을 수 없습니다. pointer-events 속성은 거의 필요하지 않지만, 대부분의 가치는 SVG에만 적용됩니다.

Google 검색 결과는 패딩을 사용하여 클릭 가능 영역을 더 크게 만들거나 더 작게 만드는 방법에 대한 지침입니다. 필요한 경우 CSS3 전용 속성을 사용할 수 있지만 HTML에 추가 마크 업을 추가하지 않는 것이 좋습니다.

멋진 아이디어가 있습니까?

Answer 1

을 '왼쪽' '최고'등을 사용하여 정렬 나는이 두려워을 유지할 수 있습니다 마크 업을 추가하지 않으면 불가능합니다. div을 사용하는 경우 배경 이미지가 포함 된 의사 요소를 추가 할 수 있지만 불행히도 input 요소 (:before 및 :after)에서는 불가능합니다.

당신은 배경 이미지를 처리하는 래퍼 DIV 추가해야합니다 또한 http://jsfiddle.net/sQGV9/

을,이 발생할 수 있습니다 사용성 문제에주의, 호버 효과는 보통 요소가 클릭 할 수 있음을 함축 jsfiddle 내가 너무 cursor: pointer을 추가 했으므로 클릭해야하는 정확한 영역이 명확합니다.

달성하려는 후광 효과로 이미지를 첨부하는 경우 추가 마크 업이 필요하지 않으므로 css3에서 효과를 얻을 수 있습니다.

Answer 2

당신의 테두리 나 패딩이 두꺼운 경우에, 당신은 절대 위치와 함께 그것에 새로운 사업부, 높은 Z- 인덱스 및