Css onmouseover手机替代方案

我需要为右边的图片找到一个好的替代品。如您所见，这是一个带有鼠标悬停事件的图像贴图。我需要在手机上复制同样的效果，但显然在手机上我不能使用

onmouseover

事件

如果你在手机上检查它，它会工作，但你需要保持图片“触动”才能看到效果

 <div class="clock">
            <img class="img-responsive" id="Image-Maps-Com-image-maps-2015-10-01-031428" src="http://zag-test.nowcommu.myhostpoint.ch/website/base.png" border="0" width="434" height="420" orgWidth="434" orgHeight="420" usemap="#image-maps-2015-10-01-031428" alt="" />
<map name="image-maps-2015-10-01-031428" id="ImageMapsCom-image-maps-2015-10-01-031428">
<area shape="rect" coords="432,418,434,420" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_60334" />
<area  alt="" title="" href="" shape="poly" coords="18,295,124,405,167,310,125,258" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website/1.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/1.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';"  />
<area  alt="" title="" href="" shape="poly" coords="21,136,19,286,111,245,120,180" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website/2.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/2.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';"  />
<area  alt="" title="" href="" shape="poly" coords="23,124,135,20,179,124,128,170" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website/3.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/3.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';"  />
<area  alt="" title="" href="" shape="poly" coords="144,17,298,19,256,123,183,123" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website/4.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/4.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';"  />
<area  alt="" title="" href="" shape="poly" coords="306,23,413,136,310,178,261,128" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website/5.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/5.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';"  />
<area  alt="" title="" href="" shape="poly" coords="414,299,416,142,310,182,312,253" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website6.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/6.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';"  />
<area  alt="" title="" href="" shape="poly" coords="296,413,413,305,309,258,255,307" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website/7.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/7.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';"  />
</map>
    <p style=" margin-top: 20px; color: #000;" align="left">Ablauf eines Störfalls in einer Käserei –<br>Wir sind “in Time”.</p>
</div>

在卡塞雷的一段时间内完成了一个圣杯—
Wir sind“及时”

查看，尤其是

touchstart

和

touchend

。查看，尤其是

touchstart

和

touchend

。