CSS 将鼠标悬停在 <li> 上并显示隐藏的 <ul>

Question

为方便起见，我的代码尽可能简单。

            #hidden {
              display: none;
            }
            #visible:hover + #hidden {
              display: block;
            }

<html>

<head>

</head>

<body>
  <ul>
    <li id="visible">
      Names
      <ul id="hidden">
        <li>name 1</li>
        <li>name 2</li>
        <li>name 3</li>
        <li>name 4</li>
      </ul>
    </li>

  </ul>
</body>

</html>

所以我尝试遵循此代码 example from this webiste 并对我的代码执行相同的操作，但没有成功。

你能解释一下为什么吗？告诉我正确的方法？

Answer 1

因为 ID 为 #hidden 的元素是子元素，而不是 ID 为 #visible 的元素的兄弟元素。您可以使用 Descendant selector:

#hidden {
  display: none;
}
#visible:hover #hidden {
  display: block;
}

<ul>
  <li id="visible">
    Names
    <ul id="hidden">
      <li>name 1</li>
      <li>name 2</li>
      <li>name 3</li>
      <li>name 4</li>
    </ul>
  </li>

</ul>

参考资料

Adjacent sibling selectors

Answer 2

它不起作用，因为您正在使用 adjacent sibling selector (+)。 #hidden 是 #visible 的后代，因此不需要中间选择器：

#hidden {
  display: none;
}

#visible:hover #hidden {
  display: block;
}

<ul>
  <li id="visible">
    Names
    <ul id="hidden">
      <li>name 1</li>
      <li>name 2</li>
      <li>name 3</li>
      <li>name 4</li>
    </ul>
  </li>

</ul>

您当前的选择器适用于与以下类似的结构，但显然无效：

<ul>
  <li id="visible">
    Names
  </li>
  <ul id="hidden"> /* #hidden is now a sibling of #visible */
      <li>name 1</li>
      <li>name 2</li>
      <li>name 3</li>
      <li>name 4</li>
  </ul>
</ul>

CSS 将鼠标悬停在 <li> 上并显示隐藏的 <ul>

CSS hover over <li> and reveal hidden <ul>

css

hover

show

hidden