javascript - 仅当您将鼠标悬停在下拉菜单上时才显示下拉菜单,否则当您将鼠标悬停在外面时隐藏下拉菜单
问题描述
我的网页上有一个下拉菜单,当您将鼠标悬停在它上面时它会起作用,它看起来像这样:
问题是它在悬停后没有关闭,我必须在下拉区域之外单击才能关闭它并且它与其他下拉列表重叠,如下所示:
那么当我将鼠标悬停在下拉列表之外时是否可以隐藏它?
我已经尝试添加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>
解决方案
您可以使用: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()
推荐阅读
- http - 用户名密码在 URL 中的作用是什么?
- javascript - 谷歌地图不显示,HTML
- kubernetes - 使用 Bastion SSH 到 Kubernetes pod
- karate - 如何在空手道中参数化来自詹金斯的黄瓜选项标签
- c++ - Opencv 从缓冲区写入和读取
- javascript - 用值初始化 Guard
- javascript - Chrome [VM] 文件在每次加载时创建事件处理程序
- python - 计算熊猫数据框中的摘要行
- php - mysqli_fetch_assoc() 在响应版本中不返回任何内容
- php - preg_replace 用于字符串中的“phpbb”报价和颜色标签