after 疑似要素で CSS ロールオーバー

以前、画像のCSSロールオーバーについてアクセシブルな方法はないかと考えてみたことがありました。あれから約2年、新しいサイトのHTML組んでたら、たまたま違う方法を見つけたので覚え書きしておきます。

ブラウザの対応は、おそらくafter疑似要素(contentプロパティ)に対応するブラウザなら表示されると思います。つまり、IE7以前はそもそもロールオーバーにならないってことです。まぁそこはこの際いいんです[1]

今回も画像はCSS Nite LP3の課題のものを利用させていただいています。

サンプル

下の画像の上にポインタを持ってきてみてください。

過去の記事一覧を見る

使用した画像ファイル

わかりやすいように2pxのボーダーと背景色を設定しています。

viewmore.gif

HTMLで利用した画像です。

画像 : viewmore.gif

viewmore-hover-after.gif

CSSのhover時に利用した画像です。「CSS ロールオーバーのアクセシビリティを少し考えてみた」の時とは違い、透明部分がない画像になっています。

画像 : viewmore-hover-after.gif

HTMLコード

これは以前と全く同じです。

<a href="#" class="viewMore">
  <img src="viewmore.gif" alt="過去の記事一覧を見る" width="142" height="20" />
</a>

CSSコード

プロパティはわかりやすい順序で書いています。

a.viewMore {
  display: block;
  width: 142px;  /*viewmore.gifの横幅*/
  height: 20px;  /*viewmore.gifの縦幅*/
}

a.viewMore:hover:after {
  content: url(viewmore-hover-after.gif);  /*viewmore-hover-after.gifを挿入*/
  
  width: 142px;  /*viewmore-hover-after.gifの横幅*/
  height: 20px;  /*viewmore-hover-after.gifの縦幅*/
  
  position: absolute;
  margin-left: -142px;  /*viewmore-hover-after.gifの横幅分マイナス*/
}

ちなみに、今回はa.viewMoreをブロック要素にしていますが、この指定は必要なくても動作します。このサンプルではline-heightが指定されている関係でafter疑似要素で挿入した画像との縦位置がずれてしまうためにこのようにしているだけで、.css_rollover_using_after-pseudo-element p {line-height: 1;}とかすると、ブロック要素とする必要もなくなります。
つまり、ブロック要素からインライン要素まで幅広く使える手法になっています。

しくみ

  1. hover時にa要素の後ろ(:after)にcontentプロパティでviewmore-hover-after.gifを挿入
  2. position: absolute;」で挿入した画像をa要素の真後ろに配置
  3. margin-left: -画像の横幅;」でviewmore.gifの真上に移動

という流れです。after疑似要素は、IE8が::afterに対応していないため、:afterを使っています。

どうやらFirefox、Safari、Operaでcontentプロパティによって挿入された画像の出現位置が異なるようで、試行錯誤の過程で「position: absolute;」とすると、どのブラウザもa要素の真後ろに挿入画像がいくことが判明しました。

ですので、まだ十分な検証はできていませんし、hover時にのみviewmore-hover-after.gifを出現させると画像を読み込むタイミングがどうなるのかよくわかりません。そこのところが分かる方はぜひご教示ください。

各OFF環境での動作

CSS OFF時
イメージがそのまま表示される。
hover時は変化なし。
画像OFF時
イメージの代替テキストが表示される。
hover時もテキストのまま
JavaScript OFF時
問題なし。

もともとすべてCSSで制御しているので、もちろんCSSがOFFの時は何も変化ありません。ただ、前回と違って、画像OFF時に元の画像が消えてしまうことがないため、よりアクセシビリティは高いのではないかと思います。

考察みたいな

この方法ってすでにどなたかが見つけて実践されているんでしょうか?IE7以前では使えないのですが、今後IE8がどんどん普及してくれるようになれば、この手法も使えるようになる、ような気もします。

僕はPure CSSなところが好きです。

  1. JavaScriptでなんとかするとかすれば [back]

“after 疑似要素で CSS ロールオーバー” への 2 件のフィードバック

  1. >デッドリーさん

    コメントありがとうございます。
    リンク先を拝見させていただきました。サンプル(1), (2)はCSSで画像置換が流行った頃の手法ですね。現在はあまり好ましくはないようです。

    サンプル(3)ははじめてみました。これはかなり斬新な方法ですね。ただし、hover時の画像はスタイリング目的の要素なので、これをHTML側に入れてしまうのはあまりオススメできないなぁと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA