Onmouseover在JavaScript中添加邊框

Question

我想在鼠標懸停在導航欄按鈕上方時將頂部邊框添加到導航欄按鈕，然後在鼠標懸停在元素上時返回其原始狀態。

但是我的代碼似乎並不奏效，我使用一個函數來做到這一點在JavaScript如下：

<script type = "text/javascript"> 
function border(element){ 
element.style.borderTop ='3px solid'; 
element.style.borderColor = '#d22b2b'; 
} 
</script> 

和HTML：

<ul align="center"> 
<li onmouseover="border(this)"><a href="">Home</a></li> 
<li><a href="">About</a></li> 
<li><a href="">Services</a></li> 
<li><a href="">Portfolio</a></li> 
<li><a href="">Contact</a></li> 
</ul> 

與上面的代碼什麼當我將鼠標懸停在第一個li元素上時，就發生了這種情況。

Answer 1

我更新了你的代碼，並設法讓它工作。這裏是它的jfiddle：http://jsfiddle.net/A2gkU/2/

問題是你有太多的填充上方/下方的鏈接，所以即使有一個邊框顯示上面，它被填充隱藏。

HTML代碼：

<div id="navbar"> 
<ul align="center"> 
<li><a href="">Home</a></li> 
<li><a href="">About</a></li> 
<li><a href="">Services</a></li> 
<li><a href="">Portfolio</a></li> 
<li><a href="">Contact</a></li> 
</ul> 
</div> 

CSS代碼：

#navbar{ 
background-color: #fff; 
overflow:hidden; 
-moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.6); 
-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.6); 
box-shadow: 0px 1px 4px rgba(0,0,0,0.6); 
padding:5px; 

} 

#navbar ul {list-style:none; 
     text-align: center; 
     margin: 5px; 
     font-family: Segoe UI; 
     font-size: 17px; 
     font-weight: bold; 
} 

#navbar ul li { 
display: inline;  
} 

#navbar ul li a { 
text-decoration:none; 
color:#302E2E; 
    padding-left: 15px; 
background-color: #fff; 

} 

#navbar ul li a:hover { color: #F56; border-top: 3px solid #d22b2b;}