使用 CSS 旋转在相对层次结构中悬停不可靠

Question

我正在尝试使用纯 HTML/CSS 创建在线纸牌游戏。我创建了对象的相对层次结构，我希望用户与它们进行交互。问题是，CSS 旋转（变换：rotateX，变换样式：preserve-3d），悬停不可靠。

这是它看起来像的简化版本： http://jsfiddle.net/qLg9u51e/1/

以下是主要内容：

.container {
  transform: rotateX(50deg);
  transform-style: preserve-3d;
}

.tile {
  position: relative;
}

.object {
  position: absolute;
  background: orange;
}

.object:hover {
  background: red
}

我希望当鼠标悬停在橙色对象上时它会变成红色，但如您所见，情况并非总是如此。这是一个奇怪的行为，我不完全理解它。

通过删除 rotateX、preserve-3d 或相关的属性，悬停属性可以正常工作，但我需要这些元素。

为什么我在这里做错了？如果你不知道如何解决我的问题，你知道为什么 CSS 会这样吗？

Answer 1

看起来 row 在某些点上与 object 重叠（不是全部，这有点令人困惑！）。

添加 .row { pointer-events: none; } 和 .object { pointer-events: all; } 解决了问题：

.master {
  perspective: 500px;
  width: 200px;
  height: 100px;
}

.container {
    transform: rotateX(50deg);
    transform-style: preserve-3d;
}

.row {
  width: 200px;
  background: darkgray;
  padding: 20px;
  pointer-events: none;
}

.tile {
  height: 150px;
  width: 80px;
  margin-left: 60px;
  margin-right: 60px;
  background: #505050;
  position: relative;
}

.object {
  position: absolute;
  height: 140px;
  width: 70px;
  margin: 5px;
  background: orange;
  pointer-events: all;
}

.object:hover {
  background: red;
}

<div class="master">
  <div class="container">
    <div class="row">
      <div class="tile">
        <div class="object"/>
      </div>
    </div>
  </div>
</div>

这并不理想，因为我无法完全查明根本原因，但它同时有效！

使用 CSS 旋转在相对层次结构中悬停不可靠

Hover not reliable in a relative hierarchy using CSS rotation

css

3d

css-position

hover