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

Posted 2023-05-08

【中文标题】悬停时如何更改导航栏链接上的文本颜色（和背景）？ [复制]

【英文标题】：How to change text color (and background) on nav bar links when hovering? [duplicate]

【发布时间】：2014-07-29 05:13:06

【问题描述】：

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

谁能告诉我如何让文字在鼠标悬停时改变颜色？

这是我的结果：http://jsfiddle.net/BWnta/13/

谢谢。

这里是html： SJ Expo 导航栏下拉 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;

【参考方案1】：

您必须添加此样式：

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

Demo

【讨论】：

解决了，谢谢阿里。

很高兴。如果你的问题回答正确。您可以通过标记符号接受。祝你好运。