css - 我可以使元素的填充(或边框)不可点击吗？

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 中实现该效果，从而无需额外标记。