鏈接無法點擊，直到我將鼠標懸停在它

底部我有一個鏈接橫向菜單。如果我將鼠標懸停在下面的鏈接上，它們的行爲完全正常，整個鏈接可以按照它的樣子點擊。不過，如果我將鼠標放置從上方或側面接近，鏈接無法點擊在所有直到我的鼠標到達鏈接的底部（鏈接文字的下方）...但一旦我鼠標懸停在底部，整個鏈接可以再次點擊。這裏的HTML：鏈接無法點擊，直到我將鼠標懸停在它

<div id="menu"> 
<a class="menBtn"href="/news.php">NEWS</a> 
<a class="menBtn"href="/photos.php">PHOTOS</a> 
<a class="menBtn"href="/give.php">ABOUT</a> 
<a class="menBtn"href="/give.php">GIVE</a> 
</div>

和這裏的CSS：

#menu { 
    width:100%; 
    text-align:center; 
    } 

.menBtn { 
    padding:.25em .5em; 
    background:rgba(0,0,0,.7); 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    transition: opacity .5s; 
    -webkit-transition: opacity .5s; 
    font-size:30px; 
    color:#c1c3c2; 
    } 

.menBtn:hover { 
    opacity:.75; 
    }

關於如何解決此問題的任何建議，將不勝感激！

[編輯]菜單之前唯一的代碼如下：

<div id="banner"> 
    <span id="header">A TITLE</span>  
    </div> 

#banner { 
    text-align:center; 
    width:100%; 
    position:relative; 
    height:100px; 
    top:25px; 
    } 

#header { 
    background:rgba(0,0,0,.7); 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    font-size:40px; 
    color:#bdbb94; 
    padding:0.25em 0.5em; 
    width:30%;

}

來源

2013-10-03 steele

工作如下預期：http://jsfiddle.net/Ws96P/（JavaScript的只是用於演示目的） – Joe

我們不能排除這一問題進行更多的代碼，更具體的菜單之前會發生什麼。有些東西正在改變元素的位置/流動，因此懸停問題。 –

看起來很好，對我說：http://jsfiddle.net/jdwire/anehQ/ –

我想通了什麼問題了。我從橫幅中刪除了高度值，並添加了一個邊緣底部以將菜單向下推。

來源

2013-10-03 15:21:24 steele

鏈接無法點擊，直到我將鼠標懸停在它

回答

相關問題