BLOK

BLOK

关注
发信
关注(28)粉丝(399)

html - 需要悬停的元素上方的父元素

我有一个div（.wrapper）和一个div（.blok），在光栅（5*5）上有20个div（.blok），每个div（.front和.back panel）。不悬停时出现.front面板，悬停时出现.back面板。一切正常：D
问题是div.bloks首先出现在这个大的块（600xAuto）元素后面，blok参见ps 1。
我很久以前就看过这个了…但现在它已经掠过我的脑海。
我已经试过了：
.wrapper > .blok:hover
.bloks > .blok:hover
（已创建。blok:before dim:100px100px（.blok dim）content=）和
使用.blok:hover:before
.wrapper {pos:rel, z-index:0}&.bloks { pos:abs,z-index: 10 }&.blok {pos:rel, z-index: 10 }
链接到代码笔：http://codepen.io/anon/pen/qOBjRE
提前谢谢..
PS 1:（REW箭头代表我的鼠标）
html - 需要悬停的元素上方的父元素-LMLPHP
注2：
html - 需要悬停的元素上方的父元素-LMLPHP

@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>

最佳答案

尝试注释掉或从pointer-events:none.blok中删除css

@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>

关于html - 需要悬停的元素上方的父元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32322248/

10-09 14:41
Powered by LMLPHP ©2024 BLOK 0.037557