サンプル

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

使用した画像ファイル

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

viewmore.gif

HTMLで利用した画像です。

viewmore-hover-after.gif

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

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なところが好きです。