我的页面上有一个下拉菜单，我试图通过悬停在其上而不是单击它来显示该下拉菜单，但我似乎无法使其正常工作，这是我所做的：
我更改了此内容：
.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>
答案 0 :(得分：1)
对于上面的示例，您不需要JS，因为下拉菜单只是触发元素的后继兄弟-
更新
Julian的出色建议，当您将光标从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>