html - CSS权悬停丢失
- 悬停丢失
问题描述
我有一个简单的嵌套ul
,子列表直接显示给它们的父级。但是,如果我悬停第一个以外的其他子列表元素(直接位于父列表项的右侧),则父项的悬停将ul
丢失。这是一个片段,您可以在其中看到问题:
#btn {
position: fixed;
z-index: 5;
top: 15px;
left: 15px;
cursor: pointer;
transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#btn div {
width: 35px;
height: 2px;
margin-bottom: 8px;
background-color: #00dffc;
transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms;
}
#btn.active {
left: 230px;
}
#btn.active div {
background-color: #343838;
}
#btn.active #top {
transform: translateY(10px) rotate(-135deg);
}
#btn.active #middle {
opacity: 0;
transform: rotate(135deg);
}
#btn.active #bottom {
transform: translateY(-10px) rotate(-45deg);
}
#box {
position: fixed;
z-index: 4;
overflow: auto;
top: 0px;
left: 0px;
width: 500px;
opacity: 1;
padding: 20px 0px;
height: 100%;
background-color: lightblue;
color: white;
transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#box.active {
left: 0px;
opacity: 1;
}
#items {
position: relative;
top: 50%;
transform: translateY(-50%);
list-style-type: none;
padding-left: 0;
}
#items .item {
position: relative;
cursor: pointer;
font-size: 2em;
padding: 15px 30px;
transition: all 250ms;
}
#items .item:hover {
padding: 15px 45px;
background-color: rgba(52, 56, 56, 0.2);
}
#items > li > ul{
display: none;
top: 0px;
}
#items > li:hover > ul {
list-style-type: none;
margin-left: 25px;
position: absolute;
display: inline;
}
#items > li > ul:hover {
list-style-type: none;
margin-left: 25px;
position: absolute;
display: inline;
}
#items > li > ul > li{
border: 1px solid;
transition: all 250ms;
padding: 15px 30px;
}
#items > li:hover > ul > li:hover{
padding: 15px 45px;
background-color: rgba(52, 56, 56, 0.2);
}
#btn, #btn * {
will-change: transform;
}
#box {
will-change: transform, opacity;
}
<div id="box">
<ul id="items">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</li>
<li class="item">Item 4
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</li>
<li class="item">Item 5
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
</ul>
</div>
解决方案
您可以添加z-index: 1
到
#items > li > ul:hover {
list-style-type: none;
margin-left: 25px;
position: absolute;
display: inline;
z-index: 1;
}
#btn {
position: fixed;
z-index: 5;
top: 15px;
left: 15px;
cursor: pointer;
transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#btn div {
width: 35px;
height: 2px;
margin-bottom: 8px;
background-color: #00dffc;
transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms;
}
#btn.active {
left: 230px;
}
#btn.active div {
background-color: #343838;
}
#btn.active #top {
transform: translateY(10px) rotate(-135deg);
}
#btn.active #middle {
opacity: 0;
transform: rotate(135deg);
}
#btn.active #bottom {
transform: translateY(-10px) rotate(-45deg);
}
#box {
position: fixed;
z-index: 4;
overflow: auto;
top: 0px;
left: 0px;
width: 500px;
opacity: 1;
padding: 20px 0px;
height: 100%;
background-color: lightblue;
color: white;
transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#box.active {
left: 0px;
opacity: 1;
}
#items {
position: relative;
top: 50%;
transform: translateY(-50%);
list-style-type: none;
padding-left: 0;
}
#items .item {
position: relative;
cursor: pointer;
font-size: 2em;
padding: 15px 30px;
transition: all 250ms;
}
#items .item:hover {
padding: 15px 45px;
background-color: rgba(52, 56, 56, 0.2);
}
#items > li > ul{
display: none;
top: 0px;
}
#items > li:hover > ul {
list-style-type: none;
margin-left: 25px;
position: absolute;
display: inline;
}
#items > li > ul:hover {
list-style-type: none;
margin-left: 25px;
position: absolute;
display: inline;
z-index: 1;
}
#items > li > ul > li{
border: 1px solid;
transition: all 250ms;
padding: 15px 30px;
}
#items > li:hover > ul > li:hover{
padding: 15px 45px;
background-color: rgba(52, 56, 56, 0.2);
}
#btn, #btn * {
will-change: transform;
}
#box {
will-change: transform, opacity;
}
<div id="box">
<ul id="items">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</li>
<li class="item">Item 4
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</li>
<li class="item">Item 5
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
</ul>
</div>
推荐阅读
- sql-server - 在代理作业中运行 ssis 包,而两者都在不同的机器上
- node.js - 如果我使用 http 状态代码 302 向“/sell”发出 GET 请求,为什么我总是被重定向到“/”?
- typescript - Typescript:获取泛型类型的类型
- angular - ionic 3 [object object] 无法在 Android P 中解析数据
- django - 如何在 Python 中访问动态生成的元组?
- java - 为什么当我打开我的应用程序时没有出现默认选项卡?
- java - 为什么这两个代码片段没有给出相同的输出?
- c - 指向二维字符数组的指针:一步或两步的声明和初始化
- snowflake-cloud-data-platform - 如何限制重复记录插入到雪花表中
- java - 我的应用程序在我启动和启动时崩溃了?