html - 父元素位于需要悬停的元素之上

标签 html css

我有一个 div (.wrapper) 和一个 div(.bloks) 并且在光栅 (5*5) 上有 20 个 div (.blok)，每个 div 2 个 div(.front 和 .back 面板)。 .front 面板在未悬停时出现，您可以猜到....back 面板在悬停时出现 .blok .. 这一切都有效很好:D

问题是 div .bloks 出现在这个大块 (600xauto) 元素 .blok 的第一个和后面，请参阅 ps#1 .

我以前看过这个和修复程序..但现在我已经忘记了。

我已经尝试过:

  • .wrapper > .blok:hover
  • .bloks > .blok:hover
  • (创建 .blok:before dim: 100pxx100px (.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 箭头代表我的鼠标)

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>

最佳答案

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

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

上一篇：HTML5 标记来引用随附文本中的列表项选项

下一篇：javascript - select2 中的 processResult 不起作用

相关文章：

html - 将一项从 float 定位更改为固定定位，CSS

HTML:制作链接，以表格形式提交？

javascript - 链接元素加载

html - $anchorScroll 效果与鼠标滚动而不是单击 Angular

html - 根据第二个子div的高度动态调整第一个子div的高度

javascript - jQuery slideDown/slideUp 在 IE7 中不工作

jquery - 在 .filter() 之后找到第 n 个 child

html - 如何在 iframe 中更改 txt 文件的样式

javascript - Three.js 事件影响 DOM

python - 如何在 python 中呈现 HTML？

©2024 IT工具网  联系我们