Наведение не надежно в относительной иерархии с использованием поворота CSS - PullRequest
Новая
       20

Наведение не надежно в относительной иерархии с использованием поворота CSS

0 голосов
/ 31 января 2019

Я пытаюсь создать карточную онлайн-игру, используя чистый HTML / CSS.Я создал относительную иерархию объектов и хочу, чтобы пользователь взаимодействовал с ними.Проблема в том, что при поворотах CSS (transform: rotateX, transform-style: preserve-3d) hover не является надежным.

Вот упрощенная версия того, как это выглядит: 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 или относительное свойство, свойство hover работает правильно, но мне нужны эти элементы.

Почемуя здесь не так делаю?И если вы не знаете, как решить мою проблему, знаете ли вы, почему CSS действует так?

1 Ответ

0 голосов
/ 31 января 2019

Похоже, 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>

Это не идеально, так как я не могу точно определить основную причину, но в то же время это работает!

...