2007年05月22日
IEでhoverをa以外に効かせる
過去のCSSネタを復活。おなじみのa:hoverはIEの場合 a 属性以外には効果が無い（ZSPC：hover対応表）これを有効にするスクリプト「csshover」というスクリプトを配布している「Peterned」というサイトがある。javascriptでhoverさせるという手もあるけど、一括指定でhoverが使用できる点からこちらのほうが便利かなと...。
IEのみがターゲットということもあり、読み込みのほうもいつもの外部読込形式ではなく、IE独自の「behavior」を使う。CSS一枚に記述するだけで事足りるので楽チン。Bodyに behavior: url("ｘｘｘ.htc") という形でhtcという形式のファイルを読み込ませる。
と、ここまでが過去のエントリー内容。
どうやらcsshoverはバージョンアップしているようですね。新バージョンのVer 2.xでは:hoverだけじゃなく:active,:focusにも対応できるようになったようです。今回はこれを利用してCSSのみでシンプルなドロップダウンメニューを作ってみました。
<div id="drop_menu">
<dl>
<dt><a href="#">メニュー001</a></dt>
<dd><a href="#">メニューリンク</a></dd>
<dd><a href="#">メニューリンク</a></dd>
<dd><a href="#">メニューリンク</a></dd>
</dl>
<dl>
<dt><a href="#">メニュー002</a></dt>
<dd><a href="#">メニューリンク</a></dd>
<dd><a href="#">メニューリンク</a></dd>
<dd><a href="#">メニューリンク</a></dd>
</dl>
</div>
#drop_menu dl {
float:left;
width:20%;
}
#drop_menu dl a {
display: block;
text-decoration: none;
padding: .2em 0;
width: 100%;
color: #fff;
}
#drop_menu dl dt a {
background: #666;
border-top: 1px solid #999;
border-bottom: 1px solid #333;
text-align: center;
}
#drop_menu dl:hover dt a {
background: #000;
}
#drop_menu dl dd {
display: none;
}
#drop_menu dl:hover dd {
display: block;
}
#drop_menu dd a {
background: #09c;
border-top: 1px solid #3ECFFF;
border-bottom: 1px solid #00526C;
text-indent: 1em;
}
#drop_menu dd a:hover {
border-top: 1px solid #009BCE;
border-bottom: 1px solid #003040;
background: #005F8C;
}