Question

当我将鼠标悬停在导航栏链接上时，我想更改其颜色。我有背景改变但我希望在悬停时改变背景和文本。请注意，它适用于子链接，但不适用于主导航链接。

有人可以告诉我如何在悬停在文字上方时改变文字颜色吗？

谢谢。

这是html： SJ Expo NavBar Dropdown HTML5

    <link rel="stylesheet" href="NavBar-MonctonExpo.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>


<div id="nav">
    <div id="nav_wrapper">
        <ul>
            <li><a href="http://wellness-expo.com/index.htm" TARGET="_blank">Main</a>
            </li>
            <li> <a href="http://wellness-expo.com/Moncton/Wellness-Expo-Moncton.htm">Moncton</a>
            </li>
            <li> <a href="http://wellness-expo.com/Moncton/Seminars.htm">Lecture Schedule</a>
                <ul>
                    <li><a href="http://wellness-expo.com/Moncton/Lecture/Schedule.htm">Spring</a>
                    </li>
                    <li><a href="http://wellness-expo.com/Moncton/Lecture/Fall/Schedule.htm">Fall</a>
                    </li>
                </ul>
            </li>
            <li> <a href="http://wellness-expo.com/Moncton/Exhibitors.htm">Exhibitor List</a>
                <ul>
                    <li><a href="http://wellness-expo.com/Moncton/Exhibitor-List-Spring.htm">Spring</a>
                    </li>
                    <li><a href="http://wellness-expo.com/Moncton/Exhibitor-List-Fall.htm">Fall</a>
                    </li>
                </ul>
            </li>
            <li> <a href="http://wellness-expo.com/Moncton/ToExhibit.htm">To Exhibit</a>
                <ul>
                    <li><a href="http://wellness-expo.com/Moncton/ToExhibit-Spring.htm">Spring</a>
                    </li>
                    <li><a href="http://wellness-expo.com/Moncton/ToExhibit-Fall.htm">Fall</a>
                    </li>
                </ul>           
            </li>
            <li><a href="http://wellness-expo.com/Moncton/Contact-Us.htm" TARGET="_blank">Contact Us</a>
            </li>
        </ul>
    </div>
    <!-- Nav wrapper end -->
</div>
<!-- Nav end -->

</html

这是CSS：

    #body {
    padding: 0;
    margin: 0;
    font-family: Arial;
    font-size: 17px;
}
#nav {
    background-color: #DFF7EB;
    font-family: Arial;
}
#nav_wrapper {
    width: 800px;
    margin: 0 auto;
    text-align: center;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;
}
#nav ul li {
    display: inline-block;
}
#nav ul li:hover {
    background-color: #C6F7D4;
    color:#FFF;
}
#nav ul li a, visited {
    color: #69716D;
    display: block;
    padding: 15px;
    text-decoration: none;
}
                            /*notes--old text or background colors (CCC, 4a0,  )*/

#nav ul li:hover ul {
    display: block;
    color: #FFF;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #C6F7D4;
}
#nav ul ul li {
    display: block;
}
#nav ul ul li a:hover {
    color: #FFF;
}

Answer 1

您必须添加此样式：

#nav ul li:hover a{ 
     color:#FFF;
}

Demo

如何在悬停时更改导航栏链接上的文本颜色（和背景）？

1 个答案: