Question

老实说，我不确定如何说出标题，但如果你看一下这个例子，你会看到我在说什么。我希望下划线在列表项悬停时更改颜色，而不仅仅是在href悬停时。

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父级上时应用绿色。在这种情况下，您要在CSS中选择li悬停并应用于子a。请参阅 this fiddle 。相对代码更改是：

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

链接href时仅链接下划线

3 个答案: