我有一个简单的嵌套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>
答案 0 :(得分:1)
您可以将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>