如何更改懸停CSS上的另一個對象的屬性

Question

我目前正在嘗試更改CSS中的另一個對象的屬性，但不知道如果我這樣做的權利。任何幫助，將不勝感激。

ul.drop-menu { 
 
    opacity: 0.1; 
 
} 
 

 
nav > ul > li:hover ~ ul.drop-menu { 
 
    opacity: 1; 
 
}

<nav> 
 
    <ul> 
 
     <li>Test 
 
      <ul class="drop-menu"> 
 
       <li class="1">Test1</li> 
 
       <li class="2">Test2</li> 
 
       <li class="3">Test3</li> 
 
       <li class="4">Test4</li> 
 
       <li class="5">Test5</li> 
 
       <li class="6">Test6</li> 
 
       <li class="7">Test7</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav>

Answer 1

~是「general sibling selector」，因此它將匹配是選擇的左側的元素之後的兄弟姐妹的任何元件。

隨着你的標記，你要麼只是想刪除~針對任何ul.drop-menu那就是li一個孩子，或者如果你想的直系後裔，將其更改爲>。我假設你想要後者，以防止你在li之間嵌套多個.drop-menu。我添加了另一個嵌套菜單，並稍微改變了一下選擇器來證明這一點。

ul.drop-menu { 
 
    opacity: 0.1; 
 
} 
 

 
nav > ul li:hover > ul.drop-menu { 
 
    opacity: 1; 
 
}

<nav> 
 
    <ul> 
 
    <li>Test 
 
     <ul class="drop-menu"> 
 
     <li class="1">Test1</li> 
 
     <li class="2">Test2 
 
      <ul class="drop-menu"> 
 
      <li class="1">Test1</li> 
 
      <li class="2">Test2</li> 
 
      <li class="3">Test3</li> 
 
      <li class="4">Test4</li> 
 
      <li class="5">Test5</li> 
 
      <li class="6">Test6</li> 
 
      <li class="7">Test7</li> 
 
      </ul> 
 
     </li> 
 
     <li class="3">Test3</li> 
 
     <li class="4">Test4</li> 
 
     <li class="5">Test5</li> 
 
     <li class="6">Test6</li> 
 
     <li class="7">Test7</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

你必須使用>，而不是~。請檢查：

ul.drop-menu { 
 
    opacity: 0.1; 
 
} 
 

 
nav > ul > li:hover > ul.drop-menu { 
 
    opacity: 1; 
 
}

<nav> 
 
    <ul> 
 
     <li>Test 
 
      <ul class="drop-menu"> 
 
       <li class="1">Test1</li> 
 
       <li class="2">Test2</li> 
 
       <li class="3">Test3</li> 
 
       <li class="4">Test4</li> 
 
       <li class="5">Test5</li> 
 
       <li class="6">Test6</li> 
 
       <li class="7">Test7</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav>