是否可以在悬停时更改嵌套列表的颜色?

时间:2013-02-21 06:33:00

标签: list css3 nested

我创建了一个仅限CSS的导航,我试图弄清楚是否可以在悬停时更改嵌套列表中文本的颜色。

        <div id="navigation">
    <ul class="top-level">
        <li><a href="#">Home</a></li>
        <li><a href="#">Residential</a>
            <ul class="sub-level">
                <li><a href="#">Project 1</a></li>
                <li><a href="#">Project 2</a></li>
                <li><a href="#">Project 3</a></li>
                <li><a href="#">Project 4</a></li>
            </ul>

因此,当我将鼠标悬停在“住宅”上时,“项目1 - 4”出现,我设法使文本的颜色和背景与“住宅”不同。但是,我想要做的是现在改变“项目1-4”中悬停的文本的颜色。这可能在CSS中吗?

2 个答案:

答案 0 :(得分:0)

您可以使用 CSS Pseudo-classes 来实现此目标。

.elementclass:hover可用于在悬停时设置元素的样式。

答案 1 :(得分:0)

我明白了...... 我很确定我已经尝试过这个但可能由于某些原因它没有更新。显然在下面的课程中我需要添加白色然后我需要确保下面的进程类也有黑色(它做了)。 BlasterAlfred我也要给你一些荣誉。

#navigation a:hover{
text-decoration: none;
color: white;
}

#navigation li li a {
color: black;
}