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の仕様と考えて間違いないでしょう。
今後ブラウザのバージョンアップで、この減少は無くなるかもしれませんが、とりあえず、頭に入れておいたほうが良さそうですね。
困った人は、困った時に、思い出してみてください。
