Question

我发现导航栏出现问题。我使用标签导航，ul，li为它。我的目的是根据悬停李移动图像。不确定css有什么问题...当li：nth-child（1）悬停时，我想让li：nth-child（3）使用'top'移动位置。

这是我的HTML

<nav> <img class="nav_bar" src="images/navigation_stick.png">
            <ul class="subsection">

                <li class="subsection">Animation
                        <!--<h4 class="subsection">Modelling</h4>-->
                        <h4 class="subsection">Project</h4>
                        <!--<h4 class="subsection">Reel</h4>-->
                </li>


                <li class="subsection">Graphic 
                    <h4 class="subsection">Poster</h4>
                    <!--<h4 class="subsection">Illustration</h4>-->
                </li>

                <li>
                <img src="images/navigation_button.png">
                </li>

            </ul>
        </nav>

这是我的css

li h4.subsection{
            font-size: 14px;
            font-weight: lighter;
            padding-top: 0;
            display: block;
            max-height: 0;
            opacity: 0;
            transition: visibility 0s,  padding 0.3s, max-height 0.3s, opacity 0.2s ease-in;
            transition: padding 0.3s, max-height 0.4s, opacity 0.2s ease-out;
        }

        li:hover > h4{
            padding-top: 5px;
            max-height: 50px;
            opacity: 1;
        }

        li:nth-child(3){
            display: block;
            position: fixed;
            left: 92.92%;
            top: 100px;
            transition: all 1000ms ease;
        }

        li:nth-child(1):hover + li:nth-child(3){
            top: 300px;
        }

谢谢你的帮助！

Answer 1

您需要在选择器中使用~而不是+。 ~是“普通兄弟”，其中+是相邻/下一个兄弟选择器。 :nth-child(1)和:nth-child(3)是一般的兄弟姐妹，而不是相邻的。

li h4.subsection {
  font-size: 14px;
  font-weight: lighter;
  padding-top: 0;
  display: block;
  max-height: 0;
  opacity: 0;
  transition: visibility 0s, padding 0.3s, max-height 0.3s, opacity 0.2s ease-in;
  transition: padding 0.3s, max-height 0.4s, opacity 0.2s ease-out;
}

li:hover > h4 {
  padding-top: 5px;
  max-height: 50px;
  opacity: 1;
}

li:nth-child(3) {
  display: block;
  position: fixed;
  left: 92.92%;
  top: 100px;
  transition: all 1000ms ease;
}

li:nth-child(1):hover ~ li:nth-child(3) {
  top: 300px;
}

<nav> <img class="nav_bar" src="images/navigation_stick.png">
  <ul class="subsection">

    <li class="subsection">Animation
      <!--<h4 class="subsection">Modelling</h4>-->
      <h4 class="subsection">Project</h4>
      <!--<h4 class="subsection">Reel</h4>-->
    </li>


    <li class="subsection">Graphic
      <h4 class="subsection">Poster</h4>
      <!--<h4 class="subsection">Illustration</h4>-->
    </li>

    <li>
      <img src="images/navigation_button.png">
    </li>

  </ul>
</nav>

悬停+到不同的元素不起作用

1 个答案: