Question

所以我已经阅读了我能找到的与导航栏问题相关的主题，但是没有一个能帮助我。

我有一个HTML5导航栏，我希望它在悬停时有颜色。我以为我已经完成了正确的代码，但是当我悬停的时候，我什么都没有......

HTML：

<nav id="mainnav">
      <ul>
      <li><a href="index.html" class="thispage">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">portfolio </a></li>
      <li><a href="#">blog </a></li>
      <li><a href="#">contact</a></li>
      </ul>
      </nav>
      </header>

CSS：

#mainnav a {
width: 20%;
display: block;
float: left;
background-color: #292929;
text-align: center;
color: #FFFFFF;
text-transform: uppercase;
padding-top: 6px;
padding-bottom: 6px;
}

#mainnav a:visited, #mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
    text-decoration: none;
    background-color: #41746D;

}

我错过了一些非常明显的东西吗？

Answer 1

它对我有用。

#mainnav a {
width: 20%;
display: block;
float: left;
background-color: #292929;
text-align: center;
color: #FFFFFF;
text-transform: uppercase;
padding-top: 6px;
padding-bottom: 6px;
}

#mainnav a:visited, #mainnav a:hover, #mainnav a:active, #mainnav a:focus{
    text-decoration: none;
    background-color: #41746D;

}

<header>
<nav id="mainnav">
      <ul>
      <li><a href="index.html" class="thispage">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">portfolio </a></li>
      <li><a href="#">blog </a></li>
      <li><a href="#">contact</a></li>
      </ul>
      </nav>
      </header>

HTML 5的悬停导航链接不起作用

1 个答案: