链接的可点击区域答案

【问题标题】：Clickable area of a link链接的可点击区域
【发布时间】：2015-04-05 21:50:37
【问题描述】：

我有一个奇怪的情况。我有一个非常奇怪的可点击区域的简单链接。我可以点击链接的上方和下方，但是当我将鼠标放在字母上时，我无法点击链接。我试图扩大可点击区域，但它只是在文本之外展开。所以如果用户直接点击链接的文本，什么都不会发生。我在页面上有一些其他链接，它们工作正常。所以你可能知道，可能是什么问题？

<div class="row">
    <div class="col-md-6 col-md-offset-6">
        <a href="web.html" id="webMore">Erfahren Sie mehr</a>
    </div>
</div>

我有以下链接样式。

a {
   display: block;
   color: $mainOrange;
   position: relative;
   &:hover {
       text-decoration: none;
       color: $hoverOrange;
   }
   &:visited {
       text-decoration: none;
       color: $mainOrange;
   }
   &:after {
       top: -10px; bottom: -10px;
       right: -10px; left: -10px;
   }
}
#webMore {
   position: relative;
   top: 25px;
   font-size: 25px;
}

【问题讨论】：

我看不出有什么问题 codepen.io/anon/pen/YPbwZv 除非缺少一些相关的 CSS。
好的，不知道是什么问题，但是当我将 z-index 设置为 9999 时，问题就解决了。谢谢你们的帮助！

标签： html css twitter-bootstrap sass

【解决方案1】：

可能是您的浏览器是否完全支持...您必须尝试

-o- 歌剧

-moz- 用于 Mozilla

-webkit- 对于其他浏览器，这样做 >

<pre>

    a {
   display: block;
   color: $mainOrange;
   position: relative;
     -webkit-color: $mainOrange;
     -webkit-position: relative;


   &:hover {
       text-decoration: none;
       color: $hoverOrange;
       -moz-text-decoration: none;
       -moz-color: $hoverOrange;
       -webkit-text-decoration: none;
       -webkit-color: $hoverOrange;
       -o-text-decoration: none;
       -o-color: $hoverOrange;
   }
   &:visited {
        -webkit-text-decoration: none;
       -webkit-color: $mainOrange;
       //same for -o-  & -moz-
   }
   &:after {
       top: -10px; bottom: -10px;
       right: -10px; left: -10px;
       //same for -o-  & -moz-
   }
}
#webMore {
   position: relative;
   top: 25px;
   font-size:25px;
}
//HTML CODE AS IT IS
    <div class="row">
    <div class="col-md-6 col-md-offset-6">
        <a href="web.html" id="webMore">Erfahren Sie mehr</a>
    </div>
</div>
</pre>

【讨论】：

【解决方案2】：

请检查其他 CSS a 元素样式，因为我已经检查了您在空白页上的代码 - 它工作正常。

如果这不是 CSS 问题，请检查您的 JS 脚本或 HTML。

【讨论】：