Onmouseover在JavaScript中添加边框

Question

I want to add a top border to my navbar buttons when the mouse is hovered over them and then back to its original state when mouse is off the elements.

However my code does not seem to be working, I am using a function to do this in JavaScript as follows:

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

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

With the above code nothing is happening at all when I hover the mouse over the first li element.

Answer 1

I updated your code and managed to get it working. Here is the jfiddle for it: http://jsfiddle.net/A2gkU/2/

The problem was that you had too much padding above/below the links, so even if there was a border showing up above, it got hidden by the padding.

HTML Codes:

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

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