cssでsafariでhoverが効かずに困った話

とあるサイトを制作中です。
あらかたできてるんですが、いろんなブラウザで動作確認して細かいところを修正するという地味～～～～～な作業中です。

今はいろんなブラウザがあるし、スマホもあるし、でもほどんどの人はデフォルトのブラウザを使うだろうから、winならIE、クローム、を重点的に。いや、10ならedgeもか。
appleならsafariを重点的に動作確認してます。

大体は大丈夫なんですが、テーブルを使った簡易検索機能をもたせたページに問題発生！

スマホで見ることを考えてテーブルにはあまり多くの情報を表示させたくないので、１つの項目にオンマウスでポップアップして詳細な情報がでてくるようにしてみました。
そうするとテーブルもスッキリして、検索でも隠した要素（visibility: hidden）はちゃんとヒットするのでなかなか上出来だわ～と思ってた。
ここまでは良かった。

そのテーブルをタブレットとスマホで確認してた時、、、
hiddenにしてる要素がタップしてもでない、、、時がある。
というのは出るときもある。

？？？？？？？？？？？？？？

「西」と検索するとちゃんとポップアップするのに、「東」と検索するとでない！
テーブルの表示を「次へ」（10行ずつ表示して移動するやつね）にしたらでない！
100件表示したらでる！並びかえしたら昇順の時はでるのに降順の時はでない！

？？？？？？？？？？？？？？

どうゆうこと？？？？

しかも同じデバイスでクロームでは効くのにsafariだけで効かない！

cssに問題かなぁ～とか、js が邪魔してるのかなぁ～とかいろいろ考えて調べた結果、
スマホでhover要素が効かない時の対処法という記事を見つけました。

うん、タップしてもポップアップが表示されないんだから、hoverだよな、とその対処法を試してみたら
大正解！

無事どのブラウザでもスマホでも表示されるようになりました。

めっちゃ簡単だったので備忘録として残しときます。

それは、”ontouchstart属性を使う”ということ。
タッチするデバイスではこれを指定しないと、activeやhoverが反応しないそう。
（反応するときもあったけど、反応するブラウザもあったけど、それは深く考えずにいよう）

なので、bodyとか、wrapperとか、contentに適用させとくといいようです。
早速
＜div id=”content”＞に　ontouchstart=”” を追加。
それだけ。
今回はヘッダーの最後行（WPね）、#contentを
＜div id=”content” ontouchstart=””＞としました。

これだけで解決なんてステキすぎる！てかそんなことも知らんのかと言われそう。
でもいいの。
だってHPの制作とか専門じゃないから。

精進しなければ、と思う今日この頃です。