CSS
JavaScript
iOS

iOSでHoverが効かない問題

More than 1 year has passed since last update.


やりたいこと


  • 写真を表示

  • 右クリックによる画像保存を阻止

  • マウスオーバーで説明文表示

  • スマホ対応(マウスオーバーはタップに相当)


困ったこと


  • iOS上のブラウザだと説明文が出ない

  • タップによるHoverが反応していない

確認した環境


  • iPhone5s iOS 9.3.2


    • Safari 9.0

    • Chrome 51.0.2704.104




原因と対策


  • 画像保存阻止で導入したdivタグが影響しているっぽい


    • CSSの .guard { position: absolute; } の部分



  • 空のイベントリスナーを登録すると正しく動く

var elm = document.getElementById('container');

elm.addEventListener('touchstart', function() {});


サンプルコード

http://codepen.io/anon/pen/oLZXQy

HTML

<div id="container">

<div class="image">
<span class="guard" ></span>
<img src="http://placehold.it/350x150" />
</div>
<div class="text">
<p>説明文</p>
</div>
</div>

スタイルシート

#container {

position: relative;
width: 350px;
height: 150px;
margin: 0;
}

#container .guard {
position: absolute;
display: block;
height: 100%;
width: 100%;
}

#container .text {
position: absolute;
display: none;
width: 100%;
top: 0px;
color: #FFF;
background-color: black;
}

#container .text p {
padding: 0 10px;
}

#container:hover .text {
display: block;
}

Javascript

var elm = document.getElementById('container');

elm.addEventListener('touchstart', function() {});