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

您正在错误地关闭h1标签。要关闭，您需要添加/，以便标记如下：

<h1>content</h1>

此外，您不应该将h1标签用于不是标头的内容。尝试使用类似跨度的东西。

这为您提供以下内容：

＆＃13;

nav {
    float: left;
    margin-top: 30px;
    margin-left: -3px;
}
nav ul li  {
    display: inline-block;
    list-style: none;
}
nav ul li span  {
    font-size: 40.5px;
    font-weight: 600;
}
/* PADDING FOR NAV */
.navp {
    padding-right: 45px;
}
.reflect span:hover {
    text-decoration: underline;
}


.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;
}

＆＃13;

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

＆＃13;

如上所示，您还应该使用reflect作为类而不是ID。

Answer 2

<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>所做的那样，您也必须关闭每个标题标记<h1>HOME</h1>

Answer 3

您忘了按<h1>

关闭</h1>

此外，允许多个h1，但请记住，标题标记的目标是帮助搜索引擎更好地理解每个页面的主要主题。

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

<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标签悬停效果在列表中不起作用

3 个答案: