[HTML+CSS] DOCTYPEを書かないとhoverが効かない現象の話

2021年11月14日

テクノロジー

HTMlが詳しいとタカをクックっていて、痛い目にあった、ユゲタです。 とあるシステム構築をしていた時の話です。 内容が同じ処理をAページとBページで作っていた時の話です。 AページとBページの違いは、外回りのフレームだけの違いで、中身は全く同じソースを表示しています。 Aページというのは、本番ページで、Bページは、管理画面の表示画面という事なので、外回りは違っているんですが、 ほぼ変なことをしていないフレームであることは、分かっています。 この場合、画面内の特定のアイテムにマウスオーバーした際に、cssのhover機能を使って、スタイルを変更しようとした所、 Aページでは、正常に動くのだけれど、 Bページでは、正常に動かないという事象が発生してしまった。 今回は、その原因と対策について、ありがちなトラブルとして備忘録を書いておきたいと思います。

それぞれのソースコード

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css.css"> </head> <body> <div class="area"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html> <html> <head> <link rel="stylesheet" href="css.css"> </head> <body> <div class="area"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html> div > *{ display:inline-block; width:100px; height:100px; border:2px solid red; cursor:pointer; margin:10px; } div > *:hover{ border-color:blue; }

事象確認

a.htmlを表示すると、上記のような表示がされて、マウスオーバーをすると、赤枠が青枠に切り替わります。 ほぼ同じ状態のb.htmlでは、何故かマウスオーバーで表示が切り替わらないことが確認できます。 ちなみに、使用しているwebブラウザは、MacにインストールしたGoogleChromeです。

原因特定

今回のソースコードはわかりやすくしているので、見ただけで違いがわかるのですが、 そーです、DOCTYPEがb.htmlには、書き込まれていないんですね。 それだけで、cssのhover機能が使えなくなるなんて、これまで知りませんでした。 確かに、HTML5の宣言をしていないとはいえ、hover機能は、html4の頃でも使えていたのに、 なかなかの洗礼を受けてしまいました。

対策について

今回の現象を解決するには、DOCTYPEを書き込めば良いのですが、もう一つ対応方法を見つけたので、 それを共有します。 ポイントはcssの、"div > *:hover"この箇所の「*(アスタリスク)」です。 このアスタリスクを今回のDOM構造であれば、spanに変更すると、hoverが正常に動作するようになります。 不思議ですね。こんな事もこれまで経験したことがありませんでしたし、知りませんでした。 でも、*(アスタリスク)はどうしても使いたいので、迷わずDOCTYPEをセットして事なきを得たのですが、 まったく不思議すぎる現象だぜ、CSS!!! 同じ環境で、SafariとFirefoxでも、見てみたのですが、なんと全く同じ症状だったので、HTMLの仕様と考えて間違いないでしょう。 今後ブラウザのバージョンアップで、この減少は無くなるかもしれませんが、とりあえず、頭に入れておいたほうが良さそうですね。 困った人は、困った時に、思い出してみてください。