需要悬停的元素之上的父元素

时间：2015-09-01 01:32:51

标签： html css3

我有一个带div（ .bloks ）的div（.wrapper）和一个栅格（5 * 5）内的20个div（ .blok ） 2个div（ .front 和 .back 面板）。不悬停时会显示 .front 面板，您可以猜测.. .back 面板，当悬停 .blok 时..这一切都有效很好：D

问题是div .bloks 首先出现在这个大块（600xauto）后面的元素 .blok 请参阅 ps＃1

我前段时间已经看过了这个问题并且修复了......但是现在它已经飞了起来。

我已经尝试过了：

  • .wrapper > .blok:hover
  • .bloks > .blok:hover
  • （创建.blok：在昏暗之前：100pxx100px（.blok dim）content =“”）和 使用.blok:hover:before
  • .wrapper {pos:rel, z-index:0}＆amp; .bloks { pos:abs,z-index: 10 }＆amp; .blok {pos:rel, z-index: 10 }

链接到codepen：http://codepen.io/anon/pen/qOBjRE

提前感谢..

ps＃1： （重新箭头代表我的鼠标）

enter image description here

PS＃2： enter image description here 

@import url(https://fonts.googleapis.com/css?family=Pinyon+Script);
@import url(https://fonts.googleapis.com/css?family=Creepster);
 * {
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  background: black;
  background: radial-gradient(circle at top center, #01011d, #000000);
}
.wrapper {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
.bloks {
  width: 600px;
  position: absolute;
  left: 50%;
  margin-left: -300px;
  transform: rotateX(75deg) rotateZ(-45deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.blok {
  width: 100px;
  height: 100px;
  float: left;
  margin: 0 10px 10px 0;
  cursor: pointer;
  background: rgb(255, 255, 255);
  pointer-events: none;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  transform-style: preserve-3d;
}
.blok:hover {
  transform: rotateY(180deg);
  color: red;
}
.front,
.back {
  width: 100px;
  height: 100px;
}
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}
.back {
  transform: rotateY(180deg);
}
<div class="wrapper">
  <div class="bloks">
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：3)

尝试评论或删除pointer-events:none .blok

中的css

＆＃13;
＆＃13; 
@import url(https://fonts.googleapis.com/css?family=Pinyon+Script);
@import url(https://fonts.googleapis.com/css?family=Creepster);
 * {
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  background: black;
  background: radial-gradient(circle at top center, #01011d, #000000);
}
.wrapper {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
.bloks {
  width: 600px;
  position: absolute;
  left: 50%;
  margin-left: -300px;
  transform: rotateX(75deg) rotateZ(-45deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.blok {
  width: 100px;
  height: 100px;
  float: left;
  margin: 0 10px 10px 0;
  cursor: pointer;
  background: rgb(255, 255, 255);
  /* pointer-events: none; */
  -webkit-transition: 0.6s;
  transition: 0.6s;
  transform-style: preserve-3d;
}
.blok:hover {
  transform: rotateY(180deg);
  color: red;
}
.front,
.back {
  width: 100px;
  height: 100px;
}
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}
.back {
  transform: rotateY(180deg);
}
＆＃13; 
<div class="wrapper">
  <div class="bloks">
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
    <div class="blok">
      <div class="front">FRONT</div>
      <div class="back">BACK</div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题