html - 我的代码 HTML 和 CSS 是否正确，如何为导航栏中的文本添加悬停效果？

Question

我刚开始从事网页设计，我想知道我的 HTML 和 CSS 导航条码是否编写正确。它有效，但我不确定这是否是编写代码的最佳方式，或者我是否错过了代码中真正应该包含的内容。此外，如果有人知道如何在不更改导航栏背景颜色的情况下仅向导航栏中的文本添加悬停效果，那将不胜感激(类似于 Apple 的导航栏)。

HTML 和 CSS:

#mainheader {
    background-color: rgba(0, 0, 0, 0.7);
    color: black;
    margin: 0px;
    width: 100%;
    height: 50px;
    top: 0px;
    left: 0px;
    position: fixed;
    padding: 0px;
    text-aling: center;
}
#mainheader #mh-content ul {
    background-color: rgba (0, 0, 0, 0.7);
    overflow: hidden;
    color: white;
    padding: 0;
    text-align: center;
    margin: 15px;
}
.mh-button-link {
    display: inline;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    font: 16px Verdana, Georgia, serif;
}

<nav id="mainheader" class="mainheader">
   <div id="mh-content">
      <ul>
         <a class=mh-button-link href="homepage.html">Home</a>
         <a class=mh-button-link href="FAQpage.html">Forum</a>
         <a class=mh-button-link href="FAQpage.html">New</a>
         <a class=mh-button-link href="FAQpage.html">Popular</a>
         <a class=mh-button-link href="FAQpage.html">Login</a>
         <a class=mh-button-link href="FAQpage.html">Contact</a>
         <a class=mh-button-link href="FAQpage.html">FAQ</a>
         <a class=mh-button-link href="FAQpage.html">Search</a>
      </ul>
   </div>
</nav>

Answer 1

您的代码在我看来基本没问题。正如其他人所建议的那样，你错过了 <li></li>在你的 <ul> 里面.此外，您的 CSS 中有一个拼写错误:text-aling应该是 text-align .

---

要添加悬停效果，请为链接的 hover 添加新颜色伪类:

.mh-button-link:hover {
    color: gray;
}

如果你想让它转场，给你的链接添加转场:

.mh-button-link{
 ...
 -webkit-transition: color 250ms ease;
 transition: color 250ms ease;
}

这是一个活生生的正确例子:

#mainheader {
    background-color: rgba(0, 0, 0, 0.7);
    color: black;
    margin: 0px;
    width: 100%;
    height: 50px;
    top: 0px;
    left: 0px;
    position: fixed;
    padding: 0px;
    text-align: center;
}
#mainheader #mh-content ul {
    background-color: rgba (0, 0, 0, 0.7);
    overflow: hidden;
    color: white;
    padding: 0;
    text-align: center;
    margin: 15px;
}
.mh-button-link {
    display: inline;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    font: 16px Verdana, Georgia, serif;
    -webkit-transition: color 250ms ease;
    transition: color 250ms ease;
}
.mh-button-link:hover {
    color: gray;
}
li {
    display: inline;
}

<nav id="mainheader" class="mainheader">
   <div id="mh-content">
      <ul>
         <li><a class=mh-button-link href="homepage.html">Home</a></li>
         <li><a class=mh-button-link href="FAQpage.html">Forum</a></li>
         <li><a class=mh-button-link href="FAQpage.html">New</a></li>
         <li><a class=mh-button-link href="FAQpage.html">Popular</a></li>
         <li><a class=mh-button-link href="FAQpage.html">Login</a></li>
         <li><a class=mh-button-link href="FAQpage.html">Contact</a></li>
         <li><a class=mh-button-link href="FAQpage.html">FAQ</a></li>
         <li><a class=mh-button-link href="FAQpage.html">Search</a></li>
      </ul>
   </div>
</nav>

JSFiddle 版本:https://jsfiddle.net/na0ke180/