При перетаскивании не запускается событие наведения мыши только для Safari - PullRequest
Новая
       51

При перетаскивании не запускается событие наведения мыши только для Safari

0 голосов
/ 02 сентября 2018

Кажется, что-то не так в Safari, регистрирующем событие наведения с помощью css. Если вы запустите фрагмент ниже и перетащите курсор с синего на зеленый, должны произойти две вещи. Во всех браузерах зеленый div станет красным при наведении курсора. В браузерах, отличных от Safari (Firefox и Chrome, последние), при перетаскивании с синего на зеленый зеленый div станет красным при входе курсора. В Safari (также последней версии) зеленый div не становится красным, когда курсор перетаскивается из синего div в зеленый div. Кажется, проблема с распознаванием парения, когда мышь уже нажата. Я пробовал много разных вариантов и других решений, но они не работают (установка других свойств CSS, чтобы сделать его перерисовывать и так далее). Может кто-нибудь объяснить это странное поведение и как обойти / исправить это? 

div {
  position: fixed;
  color: white;
  -webkit-user-select: none;
  user-select: none;
}
div.blue {
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: blue;
}
div.green {
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background-color: green;
}
.green:hover {
  background-color: red !important;
}
<div class="blue">CLICK HERE</div>
<div class="green">AND DRAG HERE</div>

1 Ответ

0 голосов
/ 02 сентября 2018

После долгих поисков я обнаружил, что для изменения цвета приходится использовать события ввода и отпускания мыши с помощью javascript. Кажется, что Safari зависает специально, чтобы не распознавать перетаскивание как зависание. 

document.getElementsByTagName('div')[1].onmouseenter = () => {
  document.getElementsByTagName('div')[1].classList.add('hover')
}

document.getElementsByTagName('div')[1].onmouseleave = () => {
  document.getElementsByTagName('div')[1].classList.remove('hover')
}
div {
  position: fixed;
  color: white;
  -webkit-user-select: none;
  user-select: none;
}
div.blue {
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: blue;
}
div.green {
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background-color: green;
}
.green:hover, .green.hover {
  background-color: red !important;
}
<div class="blue">CLICK HERE</div>
<div class="green">AND DRAG HERE</div>
...