22
21

More than 5 years have passed since last update.

iOS Safari/WebView にも :hover はある

Last updated at Posted at 2012-12-04

前々からクリック時に :hover のスタイルが出たりするなあと思ってたのですが iOS has a :hover problem | NCZOnline を読んで、すっきりしました。

iOS の Safari/WebView で、:hover でスタイル変わるリンクをタップした場合、一旦 :hover 時のスタイルが表示されてからリンク先のページへ飛びます。

ただし :hover によって要素が消えたり現れたりする場合(visibility または display)、一度のタップでは次のページへ行かず、:hover のスタイルのまま止まるようです。そして、もう一度タップすると、リンク先のページへ飛びます。

Apple のドキュメント によると、タップの際に mouseover, mousemove, mousedown, mouseup, click の順でイベントが発生するが、mouseover, mousemove のところでコンテンツに変化があると、それ以降のイベントは発生しないとのこと。

回避するには Modernizr による .no-touch を使う方法などがあるようですが、この挙動を意図的に使うこともできそうです。

22
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
21