纯 CSS(无 JavaScript)中的 onClick 和悬停下拉菜单首先显示元素,但是当我将鼠标放在下拉元素上时菜单不会保持打开状态(但它确实在 onClick 上保持打开状态)。
这里是:
.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;
}
@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;
}
这是一个 fiddle :
最佳答案
您必须添加一条规则,告诉浏览器在悬停时显示 .menu-tabs
,因此我添加了这条规则:
.label_openclose~.menu-tabs:hover .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
检查updated fiddle here . 希望这有帮助:)
关于html - 防止下拉菜单在没有 JavaScript 的情况下隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47130702/