css 如何避免从按钮上移开光标时下拉菜单消失？

1l5u6lss 于 2023-01-10 发布在其他

关注(0)|答案(2)|浏览(173)

当我把鼠标悬停在按钮上时，我看到了下拉菜单，但是，当我导航到菜单上的任何一个项目时，下拉菜单就消失了。我想我知道问题是我只在按钮上添加了鼠标悬停，但我如何才能让它像正常的下拉菜单一样工作呢？

.dropdown {
  display: inline-block;
  padding: 5px;
  /* background:#f1f1f1; */
}

.dropbtn {
  padding: 5px;
  margin-bottom: 0px;
  width: 100%;
}

.dropdown-content {
  display: none;
  list-style: none;
  background: #f1f1f1;
  position: relative;
  top: 0px;
  left: 0px;
  padding: 0px 0px 0px 0px;
  margin: 0px;
  text-align: center;
  z-index: 1;
  width: 100%;
}

.dropdown-content li {
  margin-bottom: 0px;
  padding: 3px;
}

.dropdown-content li a {
  text-decoration: none;
  color: black;
  padding: 3px;
}

.dropdown-content li:hover,
.dropdown-content li a:hover {
  text-decoration: none;
  color: white;
  background-color: #333;
}

.dropbtn:hover+.dropdown-content {
  display: block;
}

<div class="dropdown">
  <button class="dropbtn">More</button>
  <ul class="dropdown-content">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

当我将鼠标悬停在下拉菜单中的子元素上时，我希望下拉菜单保持可见，就像任何其他下拉菜单一样。

css

来源：https://stackoverflow.com/questions/75056068/how-to-avoid-the-dropdown-from-disappearing-when-removing-cursor-from-the-button

2条答案

按热度按时间

kknvjkwl1#

您可以直接在.dropdown元素上设置:hover属性，如下所示：

.dropdown {
  display: inline-block;
  padding: 5px;
  /*background:#f1f1f1; */
}

.dropbtn {
  padding: 5px;
  margin-bottom: 0px;
  width: 100%;
}

.dropdown-content {
  display: none;
  list-style: none;
  background: #f1f1f1;
  position: relative;
  top: 0px;
  left: 0px;
  padding: 0px 0px 0px 0px;
  margin: 0px;
  text-align: center;
  z-index: 1;
  width: 100%;
}

.dropdown-content li {
  margin-bottom: 0px;
  padding: 3px;
}

.dropdown-content li a {
  text-decoration: none;
  color: black;
  padding: 3px;
}

.dropdown-content li:hover,
.dropdown-content li a:hover {
  text-decoration: none;
  color: white;
  background-color: #333;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div class="dropdown">
  <button class="dropbtn">More</button>
  <ul class="dropdown-content">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

赞(0）回复(0）举报 2023-01-10

hjzp0vay2#

您在CSS中使用的是hover，这是您的情况下的正常行为。如果您想点击按钮，并显示下拉列表，您需要一些Javascript和一个onclick事件：

function showDropdown() {
  var content = document.getElementById("dropdown-content");
  if (content.style.display === "block") {
    content.style.display = "none";
  } else {
    content.style.display = "block";
  }
}

.dropdown{
  display:inline-block;
  padding:5px;
/*   background:#f1f1f1; */
}

.dropbtn{
  padding:5px;
  margin-bottom:0px;
  width:100%;
}

.dropdown-content{
  display:none;
  list-style:none;
  background:#f1f1f1;
  position:relative;
  top:0px;
  left:0px;
  padding: 0px 0px 0px 0px;
  margin:0px;
  text-align: center;
  z-index:1;
  width:100%;
}

.dropdown-content li{
  margin-bottom:0px;
  padding:3px;
}

.dropdown-content li a{
  text-decoration:none;
  color:black;
  padding:3px;
}

.dropdown-content li:hover
,.dropdown-content li a:hover{
  text-decoration:none;
  color:white;
  background-color:#333;
}

<div class="dropdown">
  <button class="dropbtn" onclick="showDropdown()">More</button>
  <ul class="dropdown-content" id="dropdown-content">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

赞(0）回复(0）举报 2023-01-10

我来回答

css 如何避免从按钮上移开光标时下拉菜单消失？

2条答案

相关问题

热门标签

最新问答