Почему зависание элемента div не работает в iOS Safari (iPhone / iPad)? - PullRequest
Новая
       8

Почему зависание элемента div не работает в iOS Safari (iPhone / iPad)?

0 голосов
/ 29 октября 2018

Код очень прост, смотрите его часть ниже. Полный пример здесь :

Простой HTML: 

<div class="test1">
  <div class="silver1">
    <span>test1</span>
  </div>
    <span>box 1</span>
</div>

CSS 

.test1 {
  border: 1px solid red;
  width: 80px;
  background-color: red;
}

.silver1 {
  width: 30px;
  height: 30px;
  position: relative;
}

.test1:hover .silver1 {
  top: 30px;
  left: 80px;
  border: 3px dotted blue;
  background-color: yellow;
}

Тесты:

  • Наведение мышью в любом популярном браузере в Windows или Mac отлично работает.
  • При нажатии на поля на Android Mobile это работает а также.
  • При нажатии на Safari (iPhone / iPad) ничего не происходит.
  • Удерживание Safari иногда срабатывает.

Вопрос Как активировать : hover для Safari iOS? Идеально чистые решения CSS.

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

Что ж, «зависание» не относится к сенсорным интерфейсам.

Мобильный Chrome обычно вызывает первый касание, наведите указатель мыши, если он указан, и последующее нажатие аналогично нажатию. Эта функциональность может стать странной и для пользователей. Safari, как вы обнаружили, полностью игнорирует это.

Я бы посоветовал вам действительно изо всех сил пытаться удалить из всплывающих окон любой контент, который пользователи ДОЛЖНЫ сделать для завершения процесса или навигации и замены их парадигмами, специфичными для взаимодействия.

Возможно, вы даже захотите проверить, является ли устройство сенсорным и предоставляет пользователям совершенно другие возможности, вместо того, чтобы пытаться сопоставить их с парением.

Вот медиа-запрос для сенсорных устройств. @media (any-hover: none) { ... }

Больше информации от CSS-хитрости и хороший обзор того, что возможно в 2018 .

0 голосов
/ 29 октября 2018

Попробуйте, если поместите: active после: hover.

https://codepen.io/mausinc/pen/LgvmXv

.test1:hover:active .silver1 {
  top: 30px;
  left: 80px;
  border: 3px dotted blue;
  background-color: yellow;
}

Удачи

...