如何指定a:哪个元素悬停在

时间:2015-06-06 02:03:39

标签: html css

我想这样做+ Kendrick元素没有加下划线,但是Gmail和图像元素在悬停时仍然加下划线,任何帮助都会受到赞赏,谢谢

相关HTML

<body>
    <div id="header">
            <ul>
                <li><a href="#">+Kendrick</a></li>
                <li><a href="#">Gmail</a></li>
                <li><a href="#">Images</a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
    </div>
</body>

相关CSS

#header {
    background-color: none;
    width: 100%;
    height: 30px;
    position: fixed;
    left: 0;
    top: 0;
}

#header ul {
    margin-top: 5px;
    padding-left: 8px;
}

li {
    font-size: 13px;
    padding: 5px 8px 5px 8px;
    display: inline;
}

#header ul li a {
    font-weight: bold;
    color: #BBBBBB;
    text-decoration: none;
}

#header ul li a:hover {
    text-decoration: underline;
}

ul a:hover first-child {
    text-decoration: none;
}

1 个答案:

答案 0 :(得分:1)

你几乎在那里。你只需要像这样完成最后的CSS样式

#header ul li:first-child a:hover {
    text-decoration: none; 
}

以下是JSFiddle