javascript - 仅当您将鼠标悬停在其上时显示下拉菜单，或者当您将鼠标悬停在其上时隐藏下拉菜单

Question

我的网页上有一个下拉菜单，当你将鼠标悬停在它上面时它会工作，它看起来像这样:

Navbar

问题是它悬停在它上面后没有关闭，我必须在下拉区域外单击才能关闭它并且它与其他下拉菜单重叠，如下所示:

Overlapping dropdowns

那么当我将鼠标悬停在下拉菜单之外时是否可以隐藏下拉菜单？

我尝试将 display: none; 添加到 dropdown 中，这样它只会在您将鼠标悬停在它上面时显示，但它不起作用。

无论如何，这是我的代码:

.dropdown.share li:after,
.fade-1 .content {
  background: rgba(0, 0, 0, .1)
}

.dropdown.show,
.navigation li:hover:before {
  visibility: visible
}

.dropdown {
  position: fixed;
  z-index: 300;
  color: #202020;
  width: 160px;
  background: #fff;
  box-shadow: 0 6px 11px 0 rgba(0, 0, 0, .15), 0 14px 28px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .05);
  margin-bottom: 50px;
  border-radius: 6px;
  text-align: center;
  cursor: default;
  -webkit-transform: translateY(0) scale(.9);
  transform: translateY(0) scale(.9);
  -webkit-transform-origin: top;
  transform-origin: top;
  transition: opacity .35s, box-shadow .35s, -webkit-transform .35s;
  transition: transform .35s, opacity .35s, box-shadow .35s;
  transition: transform .35s, opacity .35s, box-shadow .35s, -webkit-transform .35s
}

.dropdown:not(.show) {
  pointer-events: none;
  opacity: 0
}

.dropdown.rectangular {
  border-radius: 0
}

.dropdown .title {
  font-size: 17px;
  font-weight: 500;
  margin: 0;
  text-align: center;
  opacity: .8
}

.dropdown a {
  font-size: 15px;
  opacity: .6
}

.dropdown a:hover {
  color: #EF4D26;
}

.dropdown:not(.noArrow):after,
.dropdown:not(.noArrow):before {
  content: "";
  bottom: 100%;
  left: 22px;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 7px;
  margin-left: -7px
}

.dropdown:not(.noArrow):before {
  border-bottom-color: rgba(0, 0, 0, .1);
  border-width: 8px;
  margin-left: -8px
}

.dropdown.show {
  opacity: 1;
  -webkit-transform: translateY(20px);
  transform: translateY(20px)
}

.dropdown .hideDropdown,
.dropdown.show.hide {
  opacity: 0;
  pointer-events: none
}

.dropdown.show.hide {
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .15), 0 0 0 rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .05)
}

.dropdown.bottom {
  -webkit-transform-origin: bottom;
  transform-origin: bottom
}

.dropdown.bottom.show {
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px)
}

.dropdown.bottom.show.hide {
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px)
}

.dropdown.bottom:after,
.dropdown.bottom:before {
  top: 100%;
  bottom: initial;
  border-bottom-color: rgba(255, 255, 255, 0);
  border-top-color: #fff
}

.dropdown.bottom:before {
  border-top-color: rgba(0, 0, 0, .06)
}

.dropdown.right:after,
.dropdown.right:before {
  right: 18px;
  left: auto
}

.dropdown.right:before {
  right: 17px
}

.dropdown.center:after,
.dropdown.center:before {
  left: 50%
}

.dropdown.share li {
  float: left;
  text-align: center;
  display: block;
  width: 80px;
  height: 50px;
  padding: 14px 0;
  color: #fff;
  position: relative;
  cursor: pointer;
  opacity: .9;
  transition: .15s
}

.dropdown.share li:hover {
  opacity: 1
}

.dropdown.share li:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: .25s
}

.dropdown.share li:active:after {
  opacity: 1;
  transition: .1s
}

.dropdown.share li svg {
  width: 20px;
  height: 20px;
  fill: #fff
}

.dropdown.share li.mail {
  width: 100%;
  height: auto;
  color: #202020;
  opacity: .6;
  font-size: 15px;
  padding: 20px 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px
}

.dropdown.share li.mail:hover {
  opacity: .8
}

.scroll .dropdown {
  position: absolute;
  top: 0
}

<a href="about-us">
  <li class="dropdownTrigger hover" data-dropdown-hover="true" data-dropdown-id="dropdown-ourstory"><strong style="opacity: .8;">Our Story</strong> <i class="fas fa-chevron-down" style="font-size: 10px;"></i></li>
</a>

<!-- Dropdown -->
<div class="dropdown top customDropdown center globalFont" data-dropdown-id="dropdown-ourstory" style="padding: 10px; line-height: 2em;">
  <ul>
    <li class="link"><a href="about-us#theteamspanblueprint"><strong style="font-size: 17px;">Our Game Plan</strong></a></li>
    <li class="link"><a href="about-us#meettheteam"><strong style="font-size: 17px;">Our Team</strong></a></li>
    <li class="link"><a href="about-us#ourimpact"><strong style="font-size: 17px;">Our Impact</strong></a></li>
  </ul>
</div>

Answer 1

您可以使用 :hover 来做到这一点。当您将鼠标悬停在下拉菜单上时，将其设为 display:block。可以引用Dropdown on hover .请从您的代码中删除以下内容并添加 main div

/*code to be removed from your css*/
.dropdown:not(.show) {
  pointer-events: none;
  opacity: 0
}

下面是要添加到您的 CSS 中的代码

.dropdown {
  display: none;
  position: fixed;
  z-index: 300;
  color: #202020;
  width: 160px;
  background: #fff;
  box-shadow: 0 6px 11px 0 rgba(0, 0, 0, .15), 0 14px 28px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .05);
  margin-bottom: 50px;
  border-radius: 6px;
  text-align: center;
  cursor: default;
  -webkit-transform: translateY(0) scale(.9);
  transform: translateY(0) scale(.9);
  -webkit-transform-origin: top;
  transform-origin: top;
  transition: opacity .35s, box-shadow .35s, -webkit-transform .35s;
  transition: transform .35s, opacity .35s, box-shadow .35s;
  transition: transform .35s, opacity .35s, box-shadow .35s, -webkit-transform .35s
}
.main{
 position: relative;
  display: inline-block;
}
.main:hover .dropdown {
  display: block
}

这是相同的完整工作片段

.dropdown.share li:after,
.fade-1 .content {
  background: rgba(0, 0, 0, .1)
}

.dropdown.show,
.navigation li:hover:before {
  visibility: visible
}

.dropdown {
  display: none;
  position: fixed;
  z-index: 300;
  color: #202020;
  width: 160px;
  background: #fff;
  box-shadow: 0 6px 11px 0 rgba(0, 0, 0, .15), 0 14px 28px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .05);
  margin-bottom: 50px;
  border-radius: 6px;
  text-align: center;
  cursor: default;
  -webkit-transform: translateY(0) scale(.9);
  transform: translateY(0) scale(.9);
  -webkit-transform-origin: top;
  transform-origin: top;
  transition: opacity .35s, box-shadow .35s, -webkit-transform .35s;
  transition: transform .35s, opacity .35s, box-shadow .35s;
  transition: transform .35s, opacity .35s, box-shadow .35s, -webkit-transform .35s
}
.main{
 position: relative;
  display: inline-block;
}
.main:hover .dropdown {
  display: block
}

.dropdown.rectangular {
  border-radius: 0
}

.dropdown .title {
  font-size: 17px;
  font-weight: 500;
  margin: 0;
  text-align: center;
  opacity: .8
}

.dropdown a {
  font-size: 15px;
  opacity: .6
}

.dropdown a:hover {
  color: #EF4D26;
}

.dropdown:not(.noArrow):after,
.dropdown:not(.noArrow):before {
  content: "";
  bottom: 100%;
  left: 22px;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 7px;
  margin-left: -7px
}

.dropdown:not(.noArrow):before {
  border-bottom-color: rgba(0, 0, 0, .1);
  border-width: 8px;
  margin-left: -8px
}

.dropdown.show {
  opacity: 1;
  -webkit-transform: translateY(20px);
  transform: translateY(20px)
}

.dropdown .hideDropdown,
.dropdown.show.hide {
  opacity: 0;
  pointer-events: none
}

.dropdown.show.hide {
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .15), 0 0 0 rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .05)
}

.dropdown.bottom {
  -webkit-transform-origin: bottom;
  transform-origin: bottom
}

.dropdown.bottom.show {
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px)
}

.dropdown.bottom.show.hide {
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px)
}

.dropdown.bottom:after,
.dropdown.bottom:before {
  top: 100%;
  bottom: initial;
  border-bottom-color: rgba(255, 255, 255, 0);
  border-top-color: #fff
}

.dropdown.bottom:before {
  border-top-color: rgba(0, 0, 0, .06)
}

.dropdown.right:after,
.dropdown.right:before {
  right: 18px;
  left: auto
}

.dropdown.right:before {
  right: 17px
}

.dropdown.center:after,
.dropdown.center:before {
  left: 50%
}

.dropdown.share li {
  float: left;
  text-align: center;
  display: block;
  width: 80px;
  height: 50px;
  padding: 14px 0;
  color: #fff;
  position: relative;
  cursor: pointer;
  opacity: .9;
  transition: .15s
}

.dropdown.share li:hover {
  opacity: 1
}

.dropdown.share li:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: .25s
}

.dropdown.share li:active:after {
  opacity: 1;
  transition: .1s
}

.dropdown.share li svg {
  width: 20px;
  height: 20px;
  fill: #fff
}

.dropdown.share li.mail {
  width: 100%;
  height: auto;
  color: #202020;
  opacity: .6;
  font-size: 15px;
  padding: 20px 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px
}

.dropdown.share li.mail:hover {
  opacity: .8
}

.scroll .dropdown {
  position: absolute;
  top: 0
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div class="main">
    <a href="about-us" >
      <li class="dropdownTrigger hover" data-dropdown-hover="true" data-dropdown-id="dropdown-ourstory"><strong style="opacity: .8;">Our Story</strong> <i class="fas fa-chevron-down" style="font-size: 10px;"></i></li>
    </a>

    <!-- Dropdown -->
    <div class="dropdown top customDropdown center globalFont" data-dropdown-id="dropdown-ourstory" style="padding: 10px; line-height: 2em;">
      <ul>
        <li class="link"><a href="about-us#theteamspanblueprint"><strong style="font-size: 17px;">Our Game Plan</strong></a></li>
        <li class="link"><a href="about-us#meettheteam"><strong style="font-size: 17px;">Our Team</strong></a></li>
        <li class="link"><a href="about-us#ourimpact"><strong style="font-size: 17px;">Our Impact</strong></a></li>
      </ul>
    </div>
  </div>
</body>

</html>

如果你想使用 jQuery，你可以使用 .hover()