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

因为标识为#hidden的元素是子元素，而不是标识为#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>

2 个答案: