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

第1步

从a开始删除a.navBar。

第2步

将.navBar更改为#navBar，即您在元素<div id="navBar">中声明了 id属性。

第3步

在space和a之间添加#navbar和Pseudo-elements。

下面的代码段具有上述所有修复程序。试试这个，希望对您有所帮助。谢谢

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

<div id="outerWrapper">
  <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>

Answer 2

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

#navBar ul li：将鼠标悬停在{color：＃000fff}

这意味着当您悬停li（位于#navBar内部）时，更改链接颜色

Answer 3

 <body>
      <ul>
        <li><a class="navBar" href="#">About</a></li>
        <li><a class="navBar" href="#">Our Work</a></li>
        <li><a class="navBar" href="#">Contact Us</a></li>
      </ul>
    </body>

我删除了其他嵌套不正确的div。现在将CSS放入“样式”标签中。我建议更改文本颜色或背景颜色，因为文本在白色背景上不可见。

CSS样式链接无法与我的导航链接一起使用

3 个答案: