css - Div 框的 z-index 问题

标签 css

嗨,当我悬停在上面时,我希望盒子翻转 180 度并在它们后面的盒子顶部保持 z-index。我如何实现这一点以便在顶部显示我将悬停时的 z-index 设置为 100,但是一旦我悬停它就会在框后面。我也尝试过过渡延迟,但我仍然遇到同样的问题。有人可以帮助我吗?

<!DOCTYPE html>
<html>
<head>
<style> 

.boxfront {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: green;
  backface-visibility: hidden;
}

.container {
display: inline-block;
  position: relative;
  width: 100px;
  height: 100px;
  background-color: red;
  transition-property: transform, z-index;
  transition-duration: 2s, 10s;
  transition-delay:0s,0s;
  transform-style: preserve-3d;



}

.container:hover  {
  transform: scale(2, 2) rotateY(180deg);
z-index: 100;



}






</style>
</head>
<body>
<div class="container">
  <div class="boxfront"></div>

</div>
<div class="container">
  <div class="boxfront"></div>

</div>
<div class="container">
  <div class="boxfront"></div>

</div>
<div class="container">
  <div class="boxfront"></div>

</div>
<div class="container">
  <div class="boxfront"></div>

</div>
<div class="container">
  <div class="boxfront"></div>

</div>
</body>
</html>

最佳答案

试试这个:

.container {
  z-index: 100;
}

.container:hover  {
  z-index: 200;
}

https://jsfiddle.net/uop6ehac/

关于css - Div 框的 z-index 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43949150/

相关文章:

html - 使列表中的按钮与列表元素具有相同的高度

jquery scrollTop 不适用于 chrome -webkit-

css - 当 div 单独和嵌套时更改 div 悬停上的链接颜色

javascript - Bootstrap Scroll Spy 不工作。仅显示主状态事件但向下滚动时不会更改为其他状态

javascript - 有没有办法在不阻止桌面输入的情况下阻止移动键盘显示?

html - Chrome 扩展 : Add style to element if it contains particular text

javascript - Mootools 滚动方法应该在调用方法时自动调用

jquery - “事件”而不是 :hover for touch devices

html - 模态打开时如何防止 body 滚动

html - 表设计 - 内表?