html - CSS 样式链接不适用于我的导航链接

Question

尝试在将鼠标悬停在导航链接上时更改颜色，以前从未遇到过问题，但它不会起作用。

我在几个 div 中有我的导航，我试图将我的链接样式设置为所有 div，没有任何改变。我最初是在 CSS 类中编写代码的。试图在家里做一个响应式网站，最初在导航栏中没有链接，只有文本。

 a.navBar:link {color: white; text-decoration: none; }
    a.navBar:visited {color: white; text-decoration: none; }
    a.navBar:hover {color: #16262E; text-decoration: underline; }
    a.navBar:active {color: white; text-decoration: underline; }

	<div id="outerWrapper"> </div>
    <div id="navWrapper">
    <div id="navInnerWrapper">
		<div id="navBar">
        <ul>
			<li><a href="#">About</a></li>
			<li><a href="#">Our Work</a></li>
			<li><a href="#">Contact Us</a></li>
			</ul>
    </div>
    </div>
    </div>

   

我只想要白色文本作为导航链接，当鼠标悬停在链接上时会变成#16262E。没有收到任何错误，它只是没有改变默认的带下划线的蓝色链接。

Answer 1

a.navBar 表示您正在选择一个具有“navBar”类的链接标签。该选择器不存在。没有链接标签有类 navBar。要解决此问题，您可以在悬停列表标签时应用颜色更改。使用这个选择器:

#navBar ul li:hover a {color : #000fff}

这意味着当您悬停 li(位于 #navBar 内)时更改链接颜色