Jason Keban – posted a CSS alternative to using image maps - html

Question

It works really well, but not so well in Safari or iOS mobiles. When you leave the hover state it does not return to the original state. In other browsers it does.
His CSS was;
.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);
}
and his html was;
<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>
Any help fixing this and only using CSS would be appreciated, thanks in advance.

Answer 1

There is no hover on touch devices, you're either touching an element or you're not. Sometimes your :hover state may be triggered by the touch event itself - which is why you can't leave that state as there is no mouse-out.
One solution would be to disable the :hover style for touch devices and using the :active styles instead.
You’ll need to detect if the user is using a touch device. There is no reliable way to do this in CSS. There are JS solutions such as Modernizr but you really need to research the problems with detecting touch devices. Sure, the user might have a touchscreen but perhaps they’ve got a mouse plugged in. See Stu Cox's article about this. It's old but still relevant.
Anyway, I digress. Back to your question:
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>