我真的不想失去悬停能力，我需要一种不失去悬停能力的方法。
在纯 CSS(无 JavaScript)中，如何在不失去悬停功能的情况下让下拉菜单在下拉菜单之外的点击关闭？
这是一个示例，其中有人使用 JavaScript 编写了具有关闭外部点击功能的下拉菜单。
https://koen.kivits.com/articles/pure-css-menu/
这是我的带有悬停和 onClick 的下拉菜单 CSS:
.acn-menu {
text-align: center;
background-color: rgba(0, 0, 0, 0.9);
}
.label_openclose {
display: none;
}
.menu-tabs {
height: 100%;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
}
/* This CSS makes the Solutions dropdown menu push
down the other two items when in mobile view. */
@media (min-width: 320px) {
.menu-tabs {
position: absolute;
}
}
.menu-tabs .elem {
box-sizing: border-box;
padding: 0 20px;
float: left;
height: 100%;
line-height: 70px;
background-color: rgb(30, 30, 30);
color: white;
}
.menu-check {
display: none;
}
label {
margin-bottom: 0;
}
.label_openclose {
display: inline-block;
width: 60px;
min-height: 50px;
background-color: transparent;
cursor: pointer;
overflow:hidden;
display:block;
}
.menu-tabs .elem {
line-height: initial;
float: initial;
height: 0px;
cursor: pointer;
border-top: 0px solid #000;
overflow: hidden;
}
.menu-check:checked~.menu-tabs .elem {
height: 25px;
color: white;
border-top: 2px solid rgba(255, 255, 255, 0.2);
}
.label_openclose:hover~.menu-tabs .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
.label_openclose~.menu-tabs:hover .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
不使用 JS 是否可以实现点击关闭？这是一个 fiddle :https://jsfiddle.net/Ld5L2tnf/
最佳答案
我查看了您的代码并发布了您想要的示例。这是实现目标的更简单方法。这是一个示例，您必须将其应用到您的代码中。这是一个使用复选框和标签的纯 css 和 html 解决方案。以下是有关其工作原理的详细信息。希望能帮助到你。享受吧。
<html>
<head>
<title></title>
<style>
.buttoncomtainer1{ /*A wrapper for your hover dropdown List*/
width:100px;
height:2em;
float:left;
position:absolute;
z-index:20;
}
.mycheckButton{ /*Your Label acts as a Button Triggering the checkbox*/
width:100px;
height:2em;
float:left;
display:block;
background-color:blue;
text-align:center;
color:#ffffff;
position:fixed;
z-index:20;
}
.mycheckDrop{ /*Your Dropdown*/
width:100px;
float:left;
display:none;
padding:1%;
background-color:green;
position:fixed;
z-index:20;
margin-top:2em;
}
.gone{ /*Make your checkbox disappear*/
border:0px;
outline:none;
line-height:0;
display:none;
margin:0px;
padding:0px;
width:0px;
height:0px;
}
.blackout{ /*This Div covers the page with the labelBlackout Label in it. nothing can be clicked unless The Label inside clicked first triggering the checkbox. */
width:100%;
height:100%;
float:left;
position:fixed;
z-index:15;
background-color:transparent; /* You can add a background color like this. background-color:black; opacity:0.7;*/
display:none;
}
.labelBlackout{ /*the Label inside the blackout div that covers the page*/
width:100%;
height:100%;
float:left;
}
.lnkCon{ /* Container that holds your dropdown links.*/
width:100%;
height:2em;
float:left;
margin-top:5px;
}
input[type=checkbox].gone:checked ~ div.blackout{display:block;}
input[type=checkbox].gone:checked ~ label.mycheckDrop{display:block;}
.buttoncomtainer1:hover > .mycheckDrop{display:block;}
</style>
</head>
<body>
<div class="buttoncomtainer1">
<input class="gone" id="myCheck" type="checkbox" >
<div class="blackout" ><label class="labelBlackout" for="myCheck"></label></div>
<label class="mycheckButton" for="myCheck">DropDown</label>
<label class="mycheckDrop" for="myCheck">
<span class="lnkCon"><a href="#">Button 1</a></span>
<span class="lnkCon"><a href="#">Button 2</a></span>
<span class="lnkCon"><a href="#">button 3</a></span>
</label></div>
</body>
</html>
关于html - 如何在外部点击时关闭悬停下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47168919/