Html 李：第n个孩子（x）：悬停部分起作用

我成功地使用nth-child（）使li元素悬停。在这些部分中，每个部分都可以单独工作。但是，当它们排成一行时，有些部分的悬停不起作用。如果我的问题和我对问题的理解一样模糊，我道歉。以下是关于我的代码：

当我只保留一个部分时，它运行良好，而与其他部分不兼容

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

---

删除带有

name

属性的

a

标记，或使用结束标记将其正确关闭

a

标记不是像

img

或

br

元素那样的空元素，您需要像这样关闭它

。此外，

name

不是

a

元素的适当属性。找出哪个属性与哪个元素匹配

不应使用

a

标记进行导航，而应在相应的

部分使用
id
属性。请参见下面的示例

此外，您根本不需要“：nth child”规则。您可以并且应该只使用
ul.stage li:hover
，而不是
ul.stage li:n子级（1）：hover

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


html{
颜色：#000000；
背景色：#F5；
身高：100%；
字体系列：“BebasNeueRegular”、“Arial窄字体”、Arial、无衬线字体；
}
身体{
保证金：0；
填充：0；
最小高度：100vh；
位置：相对位置；
z指数：1；
}
.btn梯度{
文字装饰：无；
边界：无；
边界半径：0px 20px 20px 0px；
填充：10%0；
文本对齐：居中；
颜色：黑色；
字号：1em；
利润：4倍2倍；
光标：指针；
背景图像：线性渐变（向右，#ECE9E6 0%，#FFFFFF 51%，#ECE9E6 100%）
.btn梯度：悬停
{ 
背景位置：
右中；
}
.包装纸{
溢出：自动；
位置：绝对位置；
排名前10%；
高度：90vh；
宽度：100%；
背景：#1CD8D2；/*旧浏览器的回退*/
背景：-webkit线性渐变（向右，#93EDC7，#1CD8D2）；/*Chrome 10-25，Safari 5.1-6*/
背景：线性渐变（向右，#93EDC7，#1CD8D2）；/*W3C，IE 10+/Edge，Firefox 16+，Chrome 26+，Opera 12+，Safari 7+*/
}
.包装艺人{
溢出：自动；
背景：#3D7EAA；/*旧浏览器的回退*/
背景：-webkit线性渐变（向右，#FFE47A，#3D7EAA）；/*Chrome 10-25，Safari 5.1-6*/
背景：线性渐变（向右，#FFE47A，#3D7EAA）；/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
高度：100vh；
位置：绝对位置；
最高：100%；
宽度：100%；
/*顶部：-100px*/
}
.包装器启动{
溢出：自动；
背景：#9CECFB；/*旧浏览器的回退*/
背景：-webkit线性渐变（向右，#0052D4，#65C7F7，#9CECFB）；/*Chrome 10-25，Safari 5.1-6*/
背景：线性渐变（向右，#0052D4，#65C7F7，#9CECFB）；/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
高度：100vh；
位置：绝对位置；
最高：200%；
宽度：100%；
/*顶部：-200px*/
}
.sportif{
溢出：自动；
背景：#5f2c82；/*旧浏览器的回退*/
背景：-webkit线性渐变（向右，#49a09d，#5f2c82）；/*Chrome 10-25，Safari 5.1-6*/
背景：线性渐变（向右，#49a09d，#5f2c82）；/*W3C，IE 10+/Edge，Firefox 16+，Chrome 26+，Opera 12+，Safari 7+*/
高度：100vh；
位置：绝对位置；
宽度：100%；
最高：300%；
/*顶部：-300px*/
}
.独立包装{
溢出：自动；
背景：#4b6cb7；/*旧浏览器的回退*/
背景：-webkit线性渐变（向右，#182848，#4b6cb7）；/*Chrome 10-25，Safari 5.1-6*/
背景：线性渐变（向右，#182848，#4b6cb7）；/*W3C，IE 10+/Edge，Firefox 16+，Chrome 26+，Opera 12+，Safari 7+*/
高度：100vh；
宽度：100%；
位置：绝对位置；
最高：400%；
/*顶部：-400px*/
}
.下一个svg{
显示：块；
位置：相对位置；
边际上限：0px；
左边距：自动；
右边距：自动；
动画名称：下一步；
动画持续时间：1s；
动画迭代次数：无限；
}
.下一个svg：悬停{
动画名称：下一步；
动画持续时间：2秒；
动画迭代次数：无限；
}
@下一个关键帧{
0%{top:0px；}
10%{top:2px；}
20%{顶部：4px；}
30%{顶部：6px；}
40%{top:8px；}
50%{top:10px；}
60%{top:8px；}
70%{顶部：6px；}
80%{top:4px；}
90%{top:2px；}
100%{top:0px；}
}
.下一条svg多段线{
填充：无；
笔画：白色；
笔画宽度：5
}
.svg容器{
填充：0；
保证金：0；
}
.svg容器中心底部{
位置：绝对位置；
底部：2%；
左：45%；
}
.中间页{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.舞台{
宽度：15%；
填充：0；
}
ul.stage li.languette-in{
边缘顶部：20px；
边缘底部：20px；
位置：相对位置；
左-50%；
}
ul.阶段li.languette-out{
边缘顶部：20px；
边缘底部：20px；
位置：相对位置；
左：0；
}
ul.li舞台：悬停{
左：0；
}
第二阶段{
宽度：100%；
显示：块；
位置：相对位置；
左：0；
}























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