Question

我有一个我喜欢的风格导航，但是当你越过边框时会有一个小闪光，背景悬停效果仍然适用，但文字颜色没有变化。我已经尝试了各种方法来调整“a”元素（触发文本更改）的大小，并且无论我如何调整它，它总是保持在边界区域内。我也尝试将颜色更改添加到li：hover部分，但没有效果。

这是导航栏：

<div id="leftmenu">
    <ul id="sidenav">
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
    </ul>
</div>

这就是CSS（可能过于复杂 - 我尝试了很多不同的东西，似乎没有什么区别，并没有将它们全部删除）：

#leftmenu{
    float: left;
    width: 300px;
    margin: 10px 0 0 10px;
}
ul#sidenav{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul#sidenav li{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: solid medium #898E95;
    border-radius: 5px;
    text-align: center;
    margin: 5px 0 5px 0;
    background: #898E95;
    font-size: 11pt;
}
ul#sidenav li a{
    width: 295px;
    text-align: center;
    line-height: 25px;
    text-shadow: 1px 1px 0px #283744;
    text-decoration: none;
    font-size: medium;
    font-weight: bold;
    color: #FFF;
    display: block;
}
ul#sidenav li:hover{
    background-color: #E5ECF9;
}
ul#sidenav li a:hover{
    color: #5C5E64;
    text-shadow: none;
}
#contentright{
    margin-left: 320px;
    padding: 0 20px 0 20px;
}

感谢您提供的任何帮助 - 这是我的第一个问题，希望我能正确地提出来！

Answer 1

http://jsfiddle.net/b8M6e/

问题是由此行

创建的

 border: solid medium #898E95;

我刚删除该行，它解决了问题。

此外，通过删除该行，您会注意到它使菜单项比您拥有的略小。要解决此问题，请将以下行添加到类似的内容中：

 ul#sidenav li a {
     padding: 4px;
 }

更新了小提琴http://jsfiddle.net/b8M6e/1/

悬停效果不适用于文本颜色的导航按钮的边框

1 个答案: