Question

我有两个元素（主元素和底部），并且底部透明地覆盖在另一个元素上。

<div class="middle" style="background:rgba(0,0,0,0.3); position:absolute; width:250px; height:300px;">This is middle part</div>

<div class="bottom" style="background:rgba(0,0,0,0.3); position:absolute; bottom:250px; width:150px; height:200px;" ">This is bottom part</div>

当元素中间被聚焦时，我希望元素底部以透明的方式返回，而当元素底部被聚焦时，则元素中间将向后移动，而底部则向前。有什么办法吗？

Answer 1

您需要将tabindex="0"添加到div中以使其具有焦点
在z-index: 1;规则中设置<selector>:hover

赞：

.middle {
  color: white;
  background: blue;
  position: absolute;
  width: 250px;
  height: 300px;
  left: 50px;
}
.middle:focus {
  outline: 1px solid pink;
  z-index: 1;
}

.bottom {
  background: red;
  color: black;
  position: absolute;
  top: 50px;
  width: 150px;
  height: 200px;
}
.bottom:focus {
  outline: 1px solid lightblue;
  z-index: 1;
}

<div tabindex="0" class="middle">This is middle part</div>

<div tabindex="0" class="bottom">This is bottom part</div>

请注意，使用tabindex="0"时，div使得tabindex="0"不仅响应鼠标单击，而且响应键盘的标签导航。当您使用tabindex="-1"

时，它们只会响应鼠标，而不会响应键盘焦点

现在遵循第二个示例，该示例与上面的示例相同，只是具有div而不是tabindex="-1"的{{1}}的区别。请注意，您不能用键盘将它们聚焦（但可以用键盘将它们聚焦）

tabindex="0"

.middle {
  color: white;
  background: blue;
  position: absolute;
  width: 250px;
  height: 300px;
  left: 50px;
}
.middle:focus {
  outline: 1px solid pink;
  z-index: 1;
}

.bottom {
  background: red;
  color: black;
  position: absolute;
  top: 50px;
  width: 150px;
  height: 200px;
}
.bottom:focus {
  outline: 1px solid lightblue;
  z-index: 1;
}

来回移动叠加元素

1 个答案: