Question

我遇到了问题，无法解决问题。我创建了此HTML页面，但:hover上的#drop选择器无效。

＆＃13;

#drop {
    display: inline-block;
    color: white;
    background-color: #4CAF50;
    padding: 10px;
}
#droplist {
    display: none;
    position: absolute;
    z-index: 1;
}
#droplist a {
    display: block;
    text-decoration: none;
    color: white;
    background-color: olivedrab;
    padding: 10px;
}
#drop:hover #droplist {
    display: block;
}
#droplist a:hover {
    background-color: olive;
}

＆＃13;

<!DOCTYPE html>
<html lang="it">
<!--   ...   -->
<body>
    <div id="pagina">
        <div id="drop">Hover for open the menu</div>
        <div id="droplist">
            <a href="#a">Link 1</a>
            <a href="#b">Link 2</a>
            <a href="#c">Link 3</a>
        </div>
        <br/>text text text text text text text text text
    </div>
</body>
</html>

＆＃13;

我尝试将鼠标悬停在ID为#drop的div上，但元素#droplist并未显示。

Answer 1

您无法选择#drop:hover #droplist，因为#droplist不是#drop的孩子。

改为使用#drop:hover + #droplist。

element1 + element2选择器用于选择element2

之后立即放置的每个element1并设置其样式

＆＃13;

#drop {
  display: inline-block;
  color: white;
  background-color: #4CAF50;
  padding: 10px;
}

#droplist {
  display: none;
  position: absolute;
  z-index: 1;
}

#droplist a {
  display: block;
  text-decoration: none;
  color: white;
  background-color: olivedrab;
  padding: 10px;
}

#drop:hover+#droplist {
  display: block;
}

#droplist a:hover {
  background-color: olive;
}

#droplist:hover {
  display: block
}

＆＃13;

<!DOCTYPE html>
<html lang="it">
<!--   ...   -->

<body>
  <div id="pagina">
    <div id="drop">Hover for open the menu</div>
    <div id="droplist">
      <a href="#a">Link 1</a>
      <a href="#b">Link 2</a>
      <a href="#c">Link 3</a>
    </div>
  </div>
</body>

</html>

＆＃13;

编辑：您可能想要添加

#droplist:hover {
   display: block
}

这样当您将鼠标悬停时，下拉菜单就不会消失

下拉列表不起作用html css

1 个答案: