我可以使元素的填充（或边框）不可点击吗？

我有几个单选按钮，我使用PNG背景图像进行造型，使用:hover将背景图像替换为一个带有环绕光晕的背景图像。相邻单选按钮的光环区域重叠，因此它们不应该是可点击区域的一部分。但他们仍然是同一个形象的一部分。我可以使元素的填充（或边框）不可点击吗？

理想情况下，我想显示填充区域后面的光环，所以我需要每个单选按钮的内容区域可点击，但不是填充。我无法找到任何控制此属性的CSS属性。 pointer-events属性几乎是，但不是我所需要的，它的大部分值只适用于SVG。

Google搜索的所有内容都是关于如何使用填充使可点击区域变大而不是变小的指针。如果需要，我可以使用仅CSS3属性，但不希望将任何额外的标记添加到我的HTML中。

任何好点子？

2012-09-01 Thomas

他们是实际的“输入”单选按钮还是他们像单选按钮一样工作的div？ – Duopixel

它们是实际的''元素。 – Thomas

这恐怕比对没有添加额外的标记是不可能的。如果您使用的是div，则可以添加包含背景图像的伪元素，但不幸的是，在input元素（:before和:after）上不可能。

您需要添加一个包装的div处理背景图片： http://jsfiddle.net/sQGV9/

另外，提防的可用性问题，这可能会导致，悬停效果通常意味着该元素是可以点击的，所以在的jsfiddle我增加了一个cursor: pointer，这样就清楚了你应该点击的确切区域。

如果你附加一个图像与你想达到的光环效果，可能会在css3中实现效果，不需要额外的标记。

2012-09-01 13:35:08 Duopixel

谢谢！这已经非常接近我想要的了。我已经有了'cursor：pointer'，但它不是必须的，因为我使用了一些JavaScript来仅仅在实际的'input'元素被徘徊时显示晕。 – Thomas

仅供参考：仅限webkit版本，不含额外标记：http://jsfiddle.net/PPPEA/ – Duopixel

如果你的边界或填充较厚，那么你可以把它一个新的div绝对位置，较高的z-index，并使用“顶”和“左”

2012-09-01 13:16:48 krish

是的，额外divs的东西总是工作:)我希望有一个更优雅的解决方案。 – Thomas

回答