仅在悬停HREF时链接仅强调

Question

老实说，我不确定如何用标题来鸣叫，但是如果您查看示例，您会看到我在说什么。我希望在悬停列表项目时更改颜色，而不仅仅是HREF徘徊时。

演示： http://jsfiddle.net/wsa9f/

html：

<div id="main-nav">
  <ul>
    <li><a href="">Nav Item 1</a></li>
    <li><a href="">Nav Item 2</a></li>
    <li><a href="">Nav Item 3</a></li>
  </ul>
</div>

CSS：

#main-nav {
    background-color: #990000;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#990000), to(#8b0000)); /* Chrome, Safari 4+ */
    background-image: -webkit-linear-gradient(top, #990000, #8b0000); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
    background-image: -moz-linear-gradient(top, #990000, #8b0000); /* Firefox 3.6-15 */
    background-image: -o-linear-gradient(top, #990000, #8b0000); /* Opera 11.10-12.00 */
    background-image: linear-gradient(to bottom, #990000, #8b0000); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
    bottom: 0;
    position: absolute;
    height: 45px;
    width: 100%;
}
#main-nav li {
    border-right: 1px solid #9f4f49;
    color: #ffffff;
    float: left;
    font-family:'Ubuntu', sans-serif;
    font-size: 1.6em;
    font-weight: 300;
    height: 15px;
    list-style-type: none;
    padding: 8px 24px 22px 24px;
    text-align: center;
}
#main-nav li#iu-degrees-link {
    width: 181px;
}
#main-nav li#iupui-degrees-link {
    width: 108px;
}
#main-nav li#research-link {
    width: 80px;
}
#main-nav li:focus, #main-nav li:hover {
    background-color: #bd0202;
}
#main-nav a {
    border-bottom: 4px solid #ffffff;
    color: #ffffff;
    padding-bottom: 5px;
}
#main-nav a:focus, #main-nav a:hover {
    border-color: #91d6bd;
    text-decoration: none;
}

Answer 1

我的理解是，您希望一切都相同，但是当鼠标鼠标悬停在 li parent上时，请应用绿色。在这种情况下，您需要选择li悬停在CSS中，并应用于Ca。请参阅此小提琴。Relavant代码更改是：

 #main-nav li:hover a{
     border-color: #91d6bd;
     text-decoration: none;
 }

Answer 2

在这里：http：//jsfiddle.net/wsa9f/1/

您正在在正常状态下创建边界并在悬停处进行更改。

我删除了边界的创建并将其移至悬停状态。

        #main - nav a {
            color: #ffffff;
            padding - bottom: 5px;
        }
        #main - nav a: focus,
        #main - nav a: hover {
            border - bottom: 4px solid #91d6bd;
            text-decoration: none;
        }

Answer 3

#main-nav a {
    border-bottom: 4px solid #ffffff;
    color: #ffffff;
    padding-bottom: 5px;
    text-decoration: none;
}
#main-nav li a:focus,
#main-nav li:hover a {
    border-color: #91d6bd;
}