css - 使用 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 或 relative 属性，悬停属性可以正常工作，但我需要这些元素。

为什么我在这里做错了？如果你不知道如何解决我的问题，你知道为什么 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>

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