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

Question

它确实运行良好，但在 Safari 或 iOS 移动设备中效果不佳。当您离开悬停状态时，它不会返回到原始状态。在其他浏览器中是这样。

他的 CSS 是；

.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);
}

他的 html 是；

<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>

任何解决此问题且仅使用 CSS 的帮助将不胜感激，在此先感谢。

Answer 1

在触摸设备上没有悬停，你要么正在触摸一个元素，要么没有。有时你的 :hover 状态可能由触摸事件触发本身 - 这就是为什么你不能离开那个状态，因为没有鼠标移开。

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

您需要检测用户是否在使用触摸设备。在 CSS 中没有可靠的方法可以做到这一点。有Modernizr等JS解决方案但你真的需要研究检测触摸设备的问题。当然，用户可能有触摸屏，但也许他们插入了鼠标。参见 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>