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

Onmouseover在JavaScript中添加边框

1 个答案: