iOS Safariでhover状態を解除する方法 - jsdo.it - Share JavaScript, HTML5 and CSS

iOSではhover擬似クラスは clickイベント発火時に適用される。 しかし hover状態が解除されるには 他の要素のclickイベントの発火が必要で 普通の要素はclickイベントが発火しないため hover擬似クラスでドロップダウンメニューを作ると ドロップダウンを消すことができずに気持ち悪い。 そこで 全体を囲む要素等に空のonclick属性を付けてやると その要素内は適当にタップするとclickイベントが発火し ドロップダウンが消えてくれるようになる。 なおiOSではbodyはclickイベントの発生源にならないっぽく bodyにonclick属性付けても発火してくれなかった。 Androidは未検証。 直リンク http://jsrun.it/ksk1015/xBny <div class="container"> <h2>CSSでドロップダウンメニュー</h2> <ul

[halohalolin]

CSSで構築されているiOSでも動作するドロップダウンのサンプル、そもそもドロップダウンメニュー自体がタブレット機には不向きだが、PCサイトを何とか最小の手間で修正する必要がある時に参考とできるかも