懸停+不同元素不起作用

Question

我發現我的導航欄有問題。我使用標記nav，ul，李爲它。我的意圖是讓圖像根據懸停李移動。不知道css有什麼問題...我想在李：nth-​​child（1）徘徊時使li：n-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>