Question

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

<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;
}

Answer 1

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

-o- for opera

-moz- for Mozilla

-webkit-对于其他浏览器，请执行此操作＆gt;

<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>

Answer 2

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

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

链接的可点击区域

2 个答案: