html - h1 标签悬停效果在列表中不起作用

Question

我有这个 CSS:

nav {
    float: left;
    margin-top: 30px;
    margin-left: -3px;
}
nav ul li  {
    display: inline-block;
    list-style: none;
}
nav ul li h1  {
    font-size: 40.5px;
    font-weight: 600;
}
/* PADDING FOR NAV */
.navp {
    padding-right: 45px;
}
#reflect h1:hover {
    text-decoration: underline !important;
}


#reflect {
  position: relative;
  -webkit-box-reflect: below -30px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.1) 0%, transparent 50%, transparent 100%);
}

#reflect:before {
  background: -moz-linear-gradient(center top, #FFFFFF, #FFFFFF 30%, rgba(255, 255, 255, 0.9) 65%, rgba(255, 255, 255, 0.7)) repeat scroll 0 0 padding-box, -moz-element(#reflect) no-repeat scroll 0 -127px content-box rgba(0, 0, 0, 0);
  content: "";
  height: 140px;
  left: 0;
  position: absolute;
  top: 277px;
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  width: 360px;
}

还有这个 HTML:

<nav>
    <ul>
        <li id="reflect" class="navp txtRot"><h1>HOME<h1></li>
        <li id="reflect" class="navp txtOrange"><h1>ANGEBOT<h1></li>
        <li id="reflect" class="navp txtGelb"><h1>TEAM<h1></li>
        <li id="reflect" class="navp txtGruen"><h1>UMWELT<h1></li>
        <li id="reflect" class="txtBlau"><h1>KONTAKT<h1></li>
    </ul>
</nav>

我的目标是在我将鼠标悬停在 H1 标签上时在其上添加下划线。我的错误是什么？ 我也试过:

h1:hover {
    text-decoration: underline !important;
}

但这也行不通。

非常感谢任何帮助!

Answer 1

<ul>
     <li id="reflect" class="navp txtRot"><h1>HOME<h1></li>
     <li id="reflect" class="navp txtOrange"><h1>ANGEBOT<h1></li>
     <li id="reflect" class="navp txtGelb"><h1>TEAM<h1></li>
     <li id="reflect" class="navp txtGruen"><h1>UMWELT<h1></li>
     <li id="reflect" class="txtBlau"><h1>KONTAKT<h1></li>
</ul>

您似乎没有关闭 h1 标签。 <h1>HOME<h1>

您需要关闭它们。就像您对无序列表标签所做的一样 <ul></ul>您还必须关闭每个 header 标签 <h1>HOME</h1>