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状態がタッチイベント自体によってトリガされることがあります。そのため、マウスアウトがないのでその状態を離れることはできません。

解決方法の1つは、タッチデバイスの: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>