Question

我有一小段用HTML和CSS编写的代码，它们创建了一个下拉菜单。悬停按钮“ E”时，将弹出一个菜单。但是菜单消失得太快，我无法访问它。悬停“ E”按钮时，是否有办法让菜单留有足够的时间供我访问？

代码如下：

#topbar {
  padding: 0px;
  background: black;
  height: 10%;
}

#e_button {
  position: relative;
  width: 40px;
  height: 100%;
}

#zul_menu {
  border: 1px black solid;
  display: none;
  position: absolute;
  top: 80px;
  //margin: 0;
  //padding: 0px;
  //overflow: hidden;
  z-index: 1;
}

#e_button:hover~#zul_menu {
  display: block;
}

<div>
  <p>Up...</p>
</div>

<div id="topbar">
  <button id="e_button">E</button>
  <ul id="zul_menu">
    <li class="test"><a class="active" href="mainPage.php">Home</a></li>
    <li class="test"><a href="Cats.php"> Cats</a></li>
    <li class="test"><a href="Dogs.php">Dogs</a></li>
    <li class="test"><a href="#contact">Contact</a></li>
  </ul>
</div>
<div>
  <p>Down...</p>
</div>

Answer 1

在按钮和下拉列表周围添加包装器div，使其相对，并为其悬停添加样式。

#topbar {
  padding: 0px;
  background: black;
  height: 10%;
}

#e_button {
  width: 40px;
  height: 100%;
}

#zul_menu {
  border: 1px black solid;
  display: none;
  position: absolute;
  top: 2px;
  //margin: 0;
  //padding: 0px;
  //overflow: hidden;
  z-index: 1;
}

#button_wrapper {
  position: relative;
  display: inline-block;
}

#button_wrapper:hover #zul_menu {
  display: block;
}

<div>
  <p>Up...</p>
</div>

<div id="topbar">
  <div id="button_wrapper">
    <button id="e_button">E</button>
    <ul id="zul_menu">
      <li class="test"><a class="active" href="mainPage.php">Home</a></li>
      <li class="test"><a href="Cats.php"> Cats</a></li>
      <li class="test"><a href="Dogs.php">Dogs</a></li>
      <li class="test"><a href="#contact">Contact</a></li>
    </ul>
  </div>
</div>
<div>
  <p>Down...</p>
</div>

Answer 2

隐藏动画

使用opacity 代替 display: none/block

您可以使用opacity: 0;隐藏它，transition: opacity 0.5s 1s;进行动画处理……:hover使用opacity: 1;和transition: opacity 0.5s;

#topbar {
  padding: 0px;
  background: black;
  height: 10%;
}

#e_button {
  position: relative;
  width: 40px;
  height: 100%;
}

#zul_menu {
  border: 1px black solid;
  opacity: 0;
  transition: opacity 0.5s 1s;
  position: absolute;
  top: 80px;
  //margin: 0;
  //padding: 0px;
  //overflow: hidden;
  z-index: 1;
}

#e_button:hover~#zul_menu {
  opacity: 1;
  transition: opacity 0.5s;
}

<div>
  <p>Up...</p>
</div>

<div id="topbar">
  <button id="e_button">E</button>
  <ul id="zul_menu">
    <li class="test"><a class="active" href="mainPage.php">Home</a></li>
    <li class="test"><a href="Cats.php"> Cats</a></li>
    <li class="test"><a href="Dogs.php">Dogs</a></li>
    <li class="test"><a href="#contact">Contact</a></li>
  </ul>
</div>
<div>
  <p>Down...</p>
</div>

Answer 3

嗯，从触发器到该边距的下拉菜单有点奇怪，但是如果您愿意，可以通过将 display 属性更改为 visibility 并进行过渡来实现此目的；另外，您还需要添加 #zul_menu：hover 行为（因此，当您将鼠标悬停在下拉菜单上时，它不会关闭）：

#topbar {
  padding: 0px;
  background: black;
  height: 10%;
}

#e_button {
  position: relative;
  width: 40px;
  height: 100%;
}

#zul_menu {
  border: 1px black solid;
  visibility: hidden;
  position: absolute;
  top: 80px;
  z-index: 1;
  transition: all 1s;
}

#e_button:hover~#zul_menu,
#zul_menu:hover {
  visibility: visible;
}

<div>
  <p>Up...</p>
</div>

<div id="topbar">
  <button id="e_button">E</button>
  <ul id="zul_menu">
    <li class="test"><a class="active" href="mainPage.php">Home</a></li>
    <li class="test"><a href="Cats.php"> Cats</a></li>
    <li class="test"><a href="Dogs.php">Dogs</a></li>
    <li class="test"><a href="#contact">Contact</a></li>
  </ul>
</div>
<div>
  <p>Down...</p>
</div>

下拉菜单消失得太快

3 个答案: