我有几个单选按钮，我正在使用PNG背景图像设置样式，使用:hover将背景图像替换为周围光环的背景图像。相邻单选按钮的光晕区域重叠，因此它们不应该是可点击区域的一部分。但它们仍然是同一形象的一部分。
理想情况下，我想显示填充区域后面的光环，因此我需要每个单选按钮的内容区域可以点击，但不填充。我找不到任何控制它的CSS属性。 pointer-events属性几乎是，但不是我需要的，并且它的大多数值仅适用于SVG。
所有谷歌搜索结果都是关于如何使用填充来使可点击区域更大而不是更小的指针。如果需要，我可以使用仅限CSS3的属性，但不希望在我的HTML中添加任何额外的标记。
有什么好主意吗？
答案 0 :(得分：2)
如果不添加额外的标记，我担心这是不可能的。如果您使用div s，则可以添加包含背景图片的伪元素，但遗憾的是，input元素（:before和:after上无法使用此元素。
您需要添加一个处理背景图像的包装div： http://jsfiddle.net/sQGV9/
另外，请注意这可能导致的可用性问题，悬停效果通常意味着该元素是可点击的，因此在jsfiddle中我添加了cursor: pointer，因此很清楚您应该点击的确切区域
如果您附加了想要实现光环效果的图像，则可以在css3中实现效果，无需额外标记。
答案 1 :(得分：0)
如果您的边框或填充更粗，那么您可以使用位置绝对，更高的z-index和使用＆＃39; top＆＃39;的对齐来保留新的div。和＆＃39;离开＆＃39;
答案 2 :(得分：0)
您应该将其更改为margin。比不可点击。