Question

我正在尝试用6列在html＆css中构建网页。所需的行为是，当用户将鼠标悬停在1列上时，它会扩展到其他5列的顶部以显示其他信息，并且当用户停止悬停时，该列会缩回原位。

在CSS中将每个div设置为过渡宽度，并向左边缘过渡以覆盖屏幕的整个宽度。悬停时，z-index也会设置为1000，以确保所选列覆盖了其余内容。

但是，当悬停停止时，由于z索引立即恢复为未定义状态，因此缩小的列会在其右侧的所有列后面对齐，这很麻烦。

我希望找到一种方法，可以将最近悬停的列保留为z-index值最高的足够长的时间，以使其能够关闭，然后将其重置，以便任何其他扩展的列都可以优先。 / p>

我尝试将z-index与transition以及transition-delay一起使用，但是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>

Answer 1

使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？悬停会在转换完成之前取消z-index

1 个答案: