Safari Only CSS Hover Event Not Triggered on Drag

Question

There seems to be something wrong with Safari registering the hover event with css. If you run the snippet below and drag the cursor from blue to green, two things should happen. On all browsers, the green div will turn red on hover. On non-Safari browsers (firefox and chrome, both latest), when dragging from blue to green, the green div will turn red when the cursor enters. On Safari (also latest), the green div does not turn red when the cursor is dragged from the blue div to the green div. It seems to be a problem with recognizing the hover when the mouse was already down. I have tried many different variations and other solutions, but they do not work (setting other css properties to make it repaint and so on). Can anyone explain this strange behavior and how to work around / fix it?

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>

Unfortunately it doesn't look like there's a way to get around it right now, at least not that I could find with the testing I did. — Kwright02, Sep 02 '18 at 04:11

score 7 · Accepted Answer · answered Sep 02 '18 at 20:22

I discovered after much more searching that I have to use javascript mouse enter and mouse leave events to change the color. Safari hover seems to be purposefully made to not recognize a drag over as a hover.

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>

Safari Only CSS Hover Event Not Triggered on Drag

1 Answers1