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