将下拉菜单行为更改为悬停而不是onclick

Question

我的页面上有一个下拉菜单，我试图通过悬停而不是单击来显示该下拉菜单，但似乎无法正常工作，这是我所做的：

我改变了这个：

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

对此：

 .dropdown:hover { pointer-events: none; opacity: 0 } 

这是整个CSS代码：

 .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 } 

这是我的HTML：

  <li class="dropdownTrigger" 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> <!-- 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

上面的示例不需要JS ，因为下拉菜单只是触发元素的后继兄弟-

更新

朱利安的“伟大的投入”将使光标从triggering element移开时链接被隐藏。 为此，我建议您包装元素以确保能够对链接执行操作

这是另一个例子

 .dropdown { display: none; } .nav:hover .dropdown{ display: block; } 

 <div class="nav"> <li class="dropdownTrigger" 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> <!-- 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> 

尝试这个 -

 .dropdown { display: none; } .dropdownTrigger:hover ~ .dropdown { display: block; } 

 <li class="dropdownTrigger" 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> <!-- 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>