html - 如何在悬停 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”，所以它会匹配选择器左侧元素之后的任何同级元素。

使用您的标记，您要么只是想删除 ~ 以定位作为 li 子级的任何 ul.drop-menu，或者，如果您想要直系后代，请将其更改为 >。我假设您想要后者，以防您在 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>