如何设置z-index？转换在转换完成之前取消z-index
[英]How can I handle setting a z-index? hover cancels z-index before transitions are complete
问题描述
我正在尝试用6列的html和css构建一个网页。 期望的行为是当用户悬停在1列以上时，它会扩展到其他5列的顶部以显示其他信息，当用户停止悬停时，列会缩小。
每个div都在CSS中设置为过渡宽度和margin-left以覆盖整个屏幕宽度。 在悬停时，z-index也设置为1000，以确保所选列覆盖其余内容。
但是，当悬停停止时，当z-index立即返回到未定义时，收缩列会在其右侧的所有列后面捕捉，这非常不和谐。
我希望找到一种方法，我可以保持最近悬停的列作为最高的z-index值保持足够长的时间使其关闭，然后重置，以便任何其他列扩展可以优先。
我已经尝试使用带转换的z-index和转换延迟，但是z-index似乎不受任何类型的转换计时器的约束。 即使将其与其他转换延迟效果分组，列也会立即跳到其右侧的所有内容，然后当延迟计时器启动时，转换开始。
body{ padding: 0; margin: 0; } .category { float: left; width: 16.66%; text-align: center; } #column1{ background-color: #147afaff; transition: width 1.5s; position:absolute; height: 100%; }#column2{ background-color: #fa9414ff; transition: width 1.5s, margin-left 1.5s; position:absolute; left:16.66%; height: 100%; }#column3{ background-color: #2bae66ff; transition: width 1.5s, margin-left 1.5s; position: absolute; left:33.32%; height: 100%; }#column4{ background-color: #fdd20eff; transition: width 1.5s, margin-left 1.5s; position:absolute; left:49.98%; height: 100%; }#column5{ background-color: #603f83ff; transition: width 1.5s, margin-left 1.5s; position:absolute; left:66.64%; height: 100%; }#column6{ background-color: #f93822ff; transition: width 1.5s, margin-left 1.5s; position:absolute; left:83.30%; height: 100%; } #column1:hover{ width: 100%; z-index:1000; }#column2:hover{ margin-left: -16.66%; width: 100%; z-index:1000; }#column3:hover{ margin-left: -33.32%; width: 100%; z-index:1000; }#column4:hover{ margin-left: -49.98%; width: 100%; z-index:1000; }#column5:hover{ margin-left: -66.64%; width: 100%; z-index:1000; }#column6:hover{ margin-left: -83.30%; width: 100%; z-index:1000; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Expanding Columns</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <header> <div class="Website Header"></div> </header> <section id="categories"> <div class="row"> <div id="column1" class="category"> <h1>Column 1</h1> </div> <div id="column2" class="category"> <h1>Column 2</h1> </div> <div id="column3" class="category"> <h1>Column 3</h1> </div> <div id="column4" class="category"> <h1>Column 4</h1> </div> <div id="column5" class="category"> <h1>Column 5</h1> </div> <div id="column6" class="category"> <h1>Column 6</h1> </div> </div> </section> </body> </html>
1 个解决方案
解决方案1
4 已采纳 2019-07-04 10:10:59
使z-index在悬停时具有即时更改，在延迟时具有延迟。 确保你也设置了默认值。
相关代码：
.category {
transition: width 1.5s, margin-left 1.5s,z-index 0s 1.5s;
z-index:0;
}
.category:hover {
transition: width 1.5s, margin-left 1.5s,z-index 0s 0s;
}
完整代码
body { padding: 0; margin: 0; } .category { float: left; width: 16.66%; text-align: center; transition: width 1.5s, margin-left 1.5s,z-index 0s 1.5s; z-index:0; } .category:hover { transition: width 1.5s, margin-left 1.5s,z-index 0s 0s; } #column1 { background-color: #147afaff; position: absolute; height: 100%; } #column2 { background-color: #fa9414ff; position: absolute; left: 16.66%; height: 100%; } #column3 { background-color: #2bae66ff; position: absolute; left: 33.32%; height: 100%; } #column4 { background-color: #fdd20eff; position: absolute; left: 49.98%; height: 100%; } #column5 { background-color: #603f83ff; position: absolute; left: 66.64%; height: 100%; } #column6 { background-color: #f93822ff; position: absolute; left: 83.30%; height: 100%; } #column1:hover { width: 100%; z-index: 1000; } #column2:hover { margin-left: -16.66%; width: 100%; z-index: 1000; } #column3:hover { margin-left: -33.32%; width: 100%; z-index: 1000; } #column4:hover { margin-left: -49.98%; width: 100%; z-index: 1000; } #column5:hover { margin-left: -66.64%; width: 100%; z-index: 1000; } #column6:hover { margin-left: -83.30%; width: 100%; z-index: 1000; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Expanding Columns</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <header> <div class="Website Header"></div> </header> <section id="categories"> <div class="row"> <div id="column1" class="category"> <h1>Column 1</h1> </div> <div id="column2" class="category"> <h1>Column 2</h1> </div> <div id="column3" class="category"> <h1>Column 3</h1> </div> <div id="column4" class="category"> <h1>Column 4</h1> </div> <div id="column5" class="category"> <h1>Column 5</h1> </div> <div id="column6" class="category"> <h1>Column 6</h1> </div> </div> </section> </body> </html>
如何在背景图片上覆盖自动完成的下拉z-index？
[英]how can i override z-index of drop-down auto complete over background image?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.