4

使用这里的技巧：在不影响布局的情况下使内联链接的可点击区域更大，我在锚元素上设置了正填充和负边距，目的是将可点击区域扩展到元素之外的一些文本中。

它有效，但前提是不透明度低于 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 时，有没有办法让它工作？

4

1 回答 1

1

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

于 2013-07-11T00:31:44.350 回答