li：nth-​​child（x）：悬停部分起作用

Question

我成功使用nth-child（）使li元素悬停了。在这些部分的每一个中都可以单独正常工作。但是，当它们连续放置时，会有一些区域的悬停功能不起作用。如果我的问题是否如我对问题的理解那样模糊，我深表歉意。请在这里关注我的代码：

当我只保留一个部分时，它工作正常，而与其他部分不兼容。

我的question.html文件的正文

<section class="wrapper after-nav">
            <ul class="stage">
                <li class="languette-in"><a href="#artiste" class="btn-grad">Artiste</a></li>
                <li class="languette-in"><a href="#startup" class="btn-grad">Start Ups</a></li>
                <li class="languette-in"><a href="#sportif" class="btn-grad">Sportif</a></li>
                <li class="languette-in"><a href="#independant" class="btn-grad">Indépendant</a></li>
            </ul>

    </section>
    <a name="artiste"/>
    <section class="wrapper-artiste">
    <ul class="stage">
                <li class="languette-out"><a href="#artiste" class="btn-grad">Artiste</a></li>
                <li class="languette-in"><a href="#startup" class="btn-grad">Start Ups</a></li>
                <li class="languette-in"><a href="#sportif" class="btn-grad">Sportif</a></li>
                <li class="languette-in"><a href="#independant" class="btn-grad">Indépendant</a></li>
            </ul>
    </section>
    <a name="startup"/>
    <section class="wrapper-startup" style="background-color: green;">
        <ul class="stage">
                <li class="languette-in"><a href="#artiste" class="btn-grad">Artiste</a></li>
                <li class="languette-out"><a href="#startup" class="btn-grad">Start Ups</a></li>
                <li class="languette-in"><a href="#sportif" class="btn-grad">Sportif</a></li>
                <li class="languette-in"><a href="#independant" class="btn-grad">Indépendant</a></li>
            </ul>

    </section>
    <a name="sportif"/>
    <section class="wrapper-sportif" style="background-color: blue;">
        <ul class="stage">
                <li class="languette-in"><a href="#artiste" class="btn-grad">Artiste</a></li>
                <li class="languette-in"><a href="#startup" class="btn-grad">Start Ups</a></li>
                <li class="languette-out"><a href="#sportif" class="btn-grad">Sportif</a></li>
                <li class="languette-in"><a href="#independant" class="btn-grad">Indépendant</a></li>
            </ul>

    </section>
    <a name="independant"/>
    <section class="wrapper-independant" style="background-color: purple;">
         <ul class="stage">
                <li class="languette-in"><a href="#artiste" class="btn-grad">Artiste</a></li>
                <li class="languette-in"><a href="#startup" class="btn-grad">Start Ups</a></li>
                <li class="languette-in"><a href="#sportif" class="btn-grad">Sportif</a></li>
                <li class="languette-out"><a href="#independant" class="btn-grad">Indépendant</a></li>
        </ul>

    </section>

question.css

.btn-grad {
  padding: 10% 0;
  color: black;
  background-image: linear-gradient(to right, #ECE9E6 0%, #FFFFFF 51%, #ECE9E6 100%)
}
.wrapper{
  position: absolute;
  top: 10%;
  height: 90vh;
  width: 100%;
}

.wrapper-artiste{
  height: 100vh;
  position: absolute;
  top: 100%;
  width: 100%;
}
.wrapper-startup{
  height: 100vh;
  position: absolute;
  top: 200%;
  width: 100%;
}
.wrapper-sportif{
  height: 100vh;
  position: absolute;
  width: 100%;

  top: 300%;
}
.wrapper-independant{
  height: 100vh;
  width: 100%;
  position: absolute;

  top: 400%;

}

.stage{
  width: 15%;
  padding: 0;
}


ul.stage li.languette-in {
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  left: -50%;
}

ul.stage li.languette-out {
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  left: 0;
}


ul.stage li:nth-child(1):hover{
  left: 0;
}
ul.stage li:nth-child(2):hover{
  left: 0;
}
ul.stage li:nth-child(3):hover{
  left: 0;
}
ul.stage li:nth-child(4):hover{
  left: 0;
}
ul.stage li a{
  width: 100%;
  display: block;
  position: relative;
  left:0;
}

Answer 1

要么删除具有a属性的name标签，要么使用结束标签正确关闭它们。 a标签不是空元素，例如img或br元素，您需要像这样<a href="your_link_goes_here"></a>一样将其关闭。此外，name不是a元素的适当属性。 Check this page找出哪个属性与哪个元素搭配。

您应该对单独的a使用id属性，而不要使用section标签进行导航。请参见下面的示例。

此外，您根本不需要“：nth-​​child”规则。您可以并且应该只使用ul.stage li:nth-child(1):hover来代替ul.stage li:hover。

希望有帮助。编码愉快：）

html{
    color: #000000;
    background-color: #F5F5F5;
    height: 100%;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}

body{
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.btn-grad {
  text-decoration: none;
  border:none;
  border-radius: 0px 20px 20px 0px;
  padding: 10% 0;
  text-align: center;
  color: black;
  font-size: 1em;
  margin:4px 2px;
  cursor: pointer;
  background-image: linear-gradient(to right, #ECE9E6 0%, #FFFFFF 51%, #ECE9E6 100%)}
.btn-grad:hover 
{ 
  background-position: 
  right center; 
}
.wrapper{
  overflow: auto;
  position: absolute;
  top: 10%;
  height: 90vh;
  width: 100%;
  background: #1CD8D2;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #93EDC7, #1CD8D2);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #93EDC7, #1CD8D2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.wrapper-artiste{
  overflow: auto;
  background: #3D7EAA;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FFE47A, #3D7EAA);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FFE47A, #3D7EAA); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  height: 100vh;
  position: absolute;
  top: 100%;
  width: 100%;
  /*top: -100px;*/
}
.wrapper-startup{
  overflow: auto;
  background: #9CECFB;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  height: 100vh;
  position: absolute;
  top: 200%;
  width: 100%;

  /*top: -200px;*/
}
.wrapper-sportif{
  overflow: auto;
  background: #5f2c82;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #49a09d, #5f2c82);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #49a09d, #5f2c82); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  height: 100vh;
  position: absolute;
  width: 100%;

  top: 300%;
  /*top: -300px;*/
}
.wrapper-independant{
  overflow: auto;
  background: #4b6cb7;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #182848, #4b6cb7);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #182848, #4b6cb7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  height: 100vh;
  width: 100%;
  position: absolute;

  top: 400%;

  /*top: -400px;*/
}

.next-svg{
  display: block;
  position: relative;
  margin-top: 0px;
  margin-left: auto; 
  margin-right: auto;
  animation-name: next;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.next-svg:hover{
  animation-name: next;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes next{ 
  0% { top: 0px; }
  10% { top: 2px; }
  20% { top: 4px; }
  30% {top: 6px;}
  40% { top: 8px; }
  50% { top: 10px; }
  60% { top: 8px; }
  70% { top: 6px; }
  80% { top: 4px; }
  90% { top: 2px; }
  100% {top: 0px;}
}
.next-svg polyline{
  fill:none;
  stroke:white;
  stroke-width:5
}

.svg-container{
  padding: 0;
  margin: 0;

}
.svg-container-center-bottom{
  position: absolute;
  bottom: 2%;
  left: 45%;

}
.center-page{
  display: flex;
  justify-content: center;
  align-items: center; 
}
.stage{
  width: 15%;
  padding: 0;
}


ul.stage li.languette-in {
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  left: -50%;
}

ul.stage li.languette-out {
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  left: 0;
}

ul.stage li:hover{
  left: 0;
}
ul.stage li a{
  width: 100%;
  display: block;
  position: relative;
  left:0;
}

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
    <section class="wrapper after-nav">
        <ul class="stage">
            <li class="languette-in"><a href="#artiste" class="btn-grad">Artiste</a></li>
            <li class="languette-in"><a href="#startup" class="btn-grad">Start Ups</a></li>
            <li class="languette-in"><a href="#sportif" class="btn-grad">Sportif</a></li>
            <li class="languette-in"><a href="#independant" class="btn-grad">Indépendant</a></li>
        </ul>

        <div class="svg-container-center-bottom">
            <a href="#artiste"><svg class="next-svg" height="50" width="100">
                    <polyline points="0,0 50,20 100,0" />
                    <polyline points="0,20 50,40 100,20" />
                    Sorry, your browser does not support inline SVG.
                </svg>
            </a>
        </div>

    </section>

    <section class="wrapper-artiste" id="artiste">
        <ul class="stage">
            <li class="languette-out"><a href="#artiste" class="btn-grad">Artiste</a></li>
            <li class="languette-in"><a href="#startup" class="btn-grad">Start Ups</a></li>
            <li class="languette-in"><a href="#sportif" class="btn-grad">Sportif</a></li>
            <li class="languette-in"><a href="#independant" class="btn-grad">Indépendant</a></li>
        </ul>

        <div class="svg-container-center-bottom">
            <a href="#startup"><svg class="next-svg" height="50" width="100">
                    <polyline points="0,0 50,20 100,0" />
                    <polyline points="0,20 50,40 100,20" />
                    Sorry, your browser does not support inline SVG.
                </svg>
            </a>
        </div>
    </section>

    <section class="wrapper-startup" style="background-color: green;" id="startup">
        <ul class="stage">
            <li class="languette-in"><a href="#artiste" class="btn-grad">Artiste</a></li>
            <li class="languette-out"><a href="#startup" class="btn-grad">Start Ups</a></li>
            <li class="languette-in"><a href="#sportif" class="btn-grad">Sportif</a></li>
            <li class="languette-in"><a href="#independant" class="btn-grad">Indépendant</a></li>
        </ul>

        <div class="svg-container-center-bottom">
            <a href="#sportif"><svg class="next-svg" height="50" width="100">
                    <polyline points="0,0 50,20 100,0" />
                    <polyline points="0,20 50,40 100,20" />
                    Sorry, your browser does not support inline SVG.
                </svg>
            </a>
        </div>

    </section>

    <section class="wrapper-sportif" style="background-color: blue;" id="sportif">
        <ul class="stage">
            <li class="languette-in"><a href="#artiste" class="btn-grad">Artiste</a></li>
            <li class="languette-in"><a href="#startup" class="btn-grad">Start Ups</a></li>
            <li class="languette-out"><a href="#sportif" class="btn-grad">Sportif</a></li>
            <li class="languette-in"><a href="#independant" class="btn-grad">Indépendant</a></li>
        </ul>

        <div class="svg-container-center-bottom">
            <a href="#independant"><svg class="next-svg" height="50" width="100">
                    <polyline points="0,0 50,20 100,0" />
                    <polyline points="0,20 50,40 100,20" />
                    Sorry, your browser does not support inline SVG.
                </svg>
            </a>
        </div>

    </section>

    <section class="wrapper-independant" style="background-color: purple;" id="independant">
        <ul class="stage">
            <li class="languette-in"><a href="#artiste" class="btn-grad">Artiste</a></li>
            <li class="languette-in"><a href="#startup" class="btn-grad">Start Ups</a></li>
            <li class="languette-in"><a href="#sportif" class="btn-grad">Sportif</a></li>
            <li class="languette-out"><a href="#independant" class="btn-grad">Indépendant</a></li>
        </ul>

        <div class="svg-container-center-bottom">
            <a href="#mission"><svg class="next-svg" height="50" width="100">
                    <polyline points="0,0 50,20 100,0" />
                    <polyline points="0,20 50,40 100,20" />
                    Sorry, your browser does not support inline SVG.
                </svg>
            </a>
        </div>

    </section>

</body>

</html>