CSSでIEに疑似要素を指定する時の注意点

リニューアルに伴い、画像の拡大表示に「Fancybox」を利用する事にしましたが、拡大させたい画像にマウスカーソルを持っていっても、通常のリンクなのでマウスカーソルは「pointer」になり、拡大されるのかそうじゃないのか判断ができません。

ということで、FancyBoxで拡大する画像には、よくある虫眼鏡的なズームカーソルを表示させることにしたのですが、IE 8をはじめとする、全てのIEに適用させるために苦労したのでそのメモです。

とりあえず、CSSでIEに画像カーソルを表示させるには「.cur」というMacユーザーにはなじみの薄い拡張子の画像にしなければならないという事で、いろいろ検索。残念ながらMacでcurファイルの作り方がわからなかったので、Windowsマシンをちょこっとお借りして「I・C コンバータ」というフリーウェアで作成。後はスタイルシートで

a.fancybox:hover {
cursor: url(http://blog.heartfield-web.com/skins/images/zoom.cur), pointer;
}

としてみました。IEは相対パスで画像を参照する事があるとの記述をどこかで見た気がするので、念のため絶対パスで記述しています。

以上でSafari、Firefoxでは上記画像をカーソルとして表示してくれるのですが、IE 8ではpointerのままです。色々調べた結果、IEはclass指定をしたアンカータグのhover疑似要素を理解していない事が判明しました。ついでにSafariとFirefoxはそれぞれ独自拡張のズームカーソルがあるとの事で、通常のスタイルシートには

a.fancybox:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}

としました。昔はW3C信者だったので、独自拡張タグの使用には抵抗があったのですが、歳をとると人間丸くなるものです。というか苦労したくない（笑）。ということで、きっと画像を読み込むより反応もいいはずですし、ありがたく独自拡張を利用しています。

で、IE専用のスタイルシートには

a.fancybox img {
cursor: url(http://blog.heartfield-web.com/skins/images/zoom.cur), pointer;
}

とすることにしました。つまり「fancybox」とクラス指定されたアンカータグの中の画像にマウスオーバーした時、指定したカーソルで表示するようにした訳です。

なんだかパズルみたいですが、物事の見方を変えるって大事ですね。

ちなみに画像を指定する場合は、何らかの理由で画像が表示できない事態に備えて、最後に標準で用意されている値を指定した方が無難です。フォントの指定と同じような考え方ですね。標準の値の中でも一番目的にあったものを指定すればいい訳ですが、今回は結局「pointer」を指定しました。なんとなく「crosshair」はターゲットを狙っている雰囲気もあるので、それにしようかと思ったのですが、とりあえずクリックしてもらわない事には意味が無いので、「クリックすれば反応があるよ」とわかる「pointer」にしたわけです。

しかしIE 8は6や7に比べるとほんとに楽に調整できますね。この一件以外、IE 8向けの調整は特にしていません。一刻も早く、7以下のIEは世の中から消えて欲しいものです。全てのIEが無くなってくれてもいいんですけどね（笑）。

Keyword: CSS / IE対策

Search

Keyword » 182