Question

我有一个带有下拉菜单的简单导航栏，当用户将鼠标悬停在导航栏中的受尊敬的链接上时，该菜单应该保留，但是当用户将鼠标悬停在实际的下拉列表而不是其链接上时，我无法使其停留。我曾尝试创建一个:hover类，并在实际的下拉列表中使用所需的显示值，但是当鼠标从链接移至下拉列表时，似乎存在一些空间，因此在第二个:hover类之前它再次变得不可见有机会被应用。

.nav-link:hover {
  box-sizing: border-box;
  color: rgb(201, 49, 49);
  transition: 0.4s;
  border-bottom: 5px solid rgb(201, 49, 49);
  cursor: pointer;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 75px;
}

.nav-link:active+.nav-dropdown {
  display: inherit;
  width: 12.5%;
  height: 200px;
  background-color: red;
}

.nav-dropdown:hover {
  display: block;
}

<div className="navbar">
  <div className="navbar-elements nav-link">Menu</div>
  <div className="nav-dropdown">Dropdown</div>
  <div className="navbar-elements nav-link">Events</div>
  <div className="navbar-elements nav-link">Reserve</div>
  <div className="navbar-elements">THE MINIMALIST</div>
  <div className="navbar-elements nav-link">Delivery</div>
  <div className="navbar-elements nav-link">About us</div>
  <div className="navbar-elements nav-link">Contacts</div>
</div>

如果可能的话，我真的更愿意只保留HTML / CSS。是否有一种无需大量重构即可实现所需行为的方法？谢谢！

Answer 1

如果您使用的是普通HTML，而不是class，而不是className；

尝试将.nav-dropdown放在.nav-link内。

并通过定位.nav-link:hover .nav-dropdown {}

来增加悬停效果

.nav-dropdown {
  display: none;
  position: absolute;
  box-sizing: border-box;
  color: rgb(201, 49, 49);
  transition: 0.4s;
  border-bottom: 5px solid rgb(201, 49, 49);
  cursor: pointer;
}

.nav-link:hover .nav-dropdown {
  display: inherit;
  width: 12.5%;
  height: 200px;
  background-color: red;
}

<div class="navbar">
  <div class="navbar-elements nav-link">
    Menu
    <div class="nav-dropdown">Dropdown</div>
  </div>
  <div class="navbar-elements nav-link">Events</div>
  <div class="navbar-elements nav-link">Reserve</div>
  <div class="navbar-elements">THE MINIMALIST</div>
  <div class="navbar-elements nav-link">Delivery</div>
  <div class="navbar-elements nav-link">About us</div>
  <div class="navbar-elements nav-link">Contacts</div>
</div>

使：hover之后的下拉菜单不再有效

1 个答案: