链接的可点击区域

-1

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

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

来源

2015-04-05 Andrej Tihonov

我没有看到任何错误http://codepen.io/anon/pen/YPbwZv除非一些涉及的CSS丢失。 – 2015-04-05 13:30:34

好的，不知道是什么问题，但是当我将z-index设置为9999时，问题就解决了。 Thx帮助你们！ – 2015-04-05 13:47:48

请检查其他CSS 一个元素的风格，因为我查过你的空白页上的代码 - 它工作正常。

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

来源

2015-04-05 13:32:59

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

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

来源

2015-04-05 13:50:37

链接的可点击区域

回答

相关问题