Question

它非常好用，但在Safari或iOS手机中却不太好用。当您离开悬停状态时，它不会返回到原始状态。它可以在其他浏览器中使用。

他的CSS是;

cleanUpApplicationRecordLocked

和他的html是;

.hotspot {
position: absolute;
border: 1px solid blue;
}
.hotspot + * {
pointer-events: none;
opacity: 0;
}
.hotspot:hover + * {
opacity: 1.0;
}
.wash {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.6);
}

任何帮助解决此问题并且仅使用CSS将会受到赞赏，提前感谢。

Answer 1

触摸设备上没有悬停，您要么触摸元素，要么不触摸。有时您的:hover状态可能会被触摸事件本身触发 - 这是为什么你不能离开这个状态，因为没有鼠标输出。

一种解决方案是禁用触摸设备的:hover样式并改为使用:active样式。

您需要检测用户是否正在使用触控设备。在CSS中没有可靠的方法来做到这一点。有一些JS解决方案，如Modernizr，但你真的需要研究检测触摸设备的问题。当然，用户可能有触摸屏，但也许他们已插入鼠标。请参阅Stu Cox's article about this。它虽旧但仍然相关。

无论如何，我离题了。回到你的问题：

if ('ontouchstart' in window || navigator.maxTouchPoints) {
  document.body.classList.add('touch');
} else {
  document.body.classList.add('notouch');
}

.hotspot {
  position: absolute;
  border: 1px solid blue;
}
.hotspot + * {
  pointer-events: none;
  opacity: 0;
}
.notouch .hotspot:hover + * {
  opacity: 1.0;
}
.hotspot:active + * {
  opacity: 1.0;
}
.wash {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.6);
}

<div style="position: relative; height: 188px; width: 300px;">
  <img src="http://demo.cloudimg.io/s/width/300/sample.li/boat.jpg">
  <div class="hotspot" style="top: 50px; left: 50px; height: 30px; width: 30px;"></div>
  <div>
    <div class="wash"></div>
    <div style="position: absolute; top: 0; left: 0;">A</div>
  </div>
  <div class="hotspot" style="top: 100px; left: 120px; height: 30px; width: 30px;"></div>
  <div>
    <div class="wash"></div>
    <div style="position: absolute; top: 0; left: 0;">B</div>
  </div>
</div>

Jason Keban - 发布了一个使用图像映射的CSS替代方案

1 个答案: