我的代码 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

您错过了 <ul> 中的 <li> 标签。无论如何，其余的看起来不错。有关 html 的参考，您可以访问许多页面，例如。 http://www.w3schools.com/

对于您的文本悬停效果，添加以下内容。

.mh-button-link:hover{
   opacity: 0.6;
   -webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
           transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 }

苹果悬停效果

查看此 fiddle，了解您的苹果式悬停效果： http://jsfiddle.net/z9xmgoza/1/

Answer 2

见fiddle

HTML

<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>

此外，将下面给定的 CSS 添加到您的样式表

CSS

#mainheader #mh-content ul li{
    display:inline-block;
}
#mainheader #mh-content ul li:hover{
    color:red;
}

对于hover效果，在CSS中有一个伪class叫做:hover。

Answer 3

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

要添加悬停效果，请将新颜色添加到 link 的 hover 伪类：

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

如果你想让它转场，请将转场添加到你的 link:

.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/

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

Is my code HTML and CSS proper, and how do I add a hover effect to just the text in the nav bar?

html

css

hover

见fiddle