4

我有几个单选按钮，我用 PNG 背景图像进行样式设置，:hover用于将背景图像换成带有周围光环的背景图像。相邻单选按钮的光环区域重叠，因此它们不应成为可点击区域的一部分。然而，它们仍然是同一图像的一部分。

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

谷歌搜索出现的所有内容都是关于如何使用填充使可点击区域更大而不是更小的指针。如有必要，我可以使用仅限 CSS3 的属性，但不希望在我的 HTML 中添加任何额外的标记。

有什么好主意吗？

4

3 回答 3

2

如果不添加额外的标记，恐怕这是不可能的。如果您使用 s ，则可以添加一个包含背景图像的伪元素，但不幸的是，元素 (和)div上是不可能的。input:before:after

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

此外，请注意这可能导致的可用性问题，悬停效果通常意味着该元素是可点击的，因此在 jsfiddle 中我添加了一个cursor: pointer，以便清楚您应该点击的精确区域。

如果你附加一张带有你想要实现的光环效果的图像，它可能可以在 css3 中实现效果，无需额外的标记。

于 2012-09-01T13:35:08.993 回答
1

您应该将其更改为边距。应该是不可点击的。

于 2019-05-23T17:15:53.107 回答
0

如果您的边框或填充较厚，那么您可以在其上保留一个新的 div，其绝对位置、较高的 z-index 和使用“top”和“left”的对齐方式

于 2012-09-01T13:16:48.220 回答