Question

使用来自此处的技巧：Making the clickable area of in-line links bigger without affecting the layout，我在锚元素上设置了正填充和负边距，目标是将可点击区域扩展为元素之外的某些文本。

它有效，但只有当不透明度值低于1时！ Firefox和Chrome表现出相同的行为。

紧凑型演示：http://jsfiddle.net/zGsZK/8/

CSS：

  a { margin-right:-250px; padding-right:250px }
 .nowork { opacity:1 }
 .works { opacity:0.999999 }

HTML：

<body>
<a href=# class=nowork>?</a> this black text is not clickable :(
<p>
<a href=# class=works>!</a> this black text is clickable, as it should be
</body>

它是如何工作的？为什么？有没有办法让它在opacity == 1时有效？

Answer 1

我真的不确定为什么会这样，但如果您将position:relative;添加到nowork类，则可点击区域将显示在文本上方，类似于works类。我认为这与浏览器呈现CSS的方式有关，并且由于<p>标记在锚之后呈现，因此其原生CSS（cursor:normal;而不是cursor:pointer;）优先。< / p>

仅当不透明度<1时，锚点填充才可单击

1 个答案: