HOME > Tips > CSS > CSSでイメージ置換を使わずロールオーバー

CSSでイメージ置換を使わずロールオーバー

  • Author:920

グローバルナビゲーションのボタンをロールオーバーさせる方法はいくつかあります。

以前はJavaScriptを使用することが普通でしたが、最近はCSSで「text-indent」を使用してイメージ置換することが多くなってきました。

しかし、「text-indent」を使用してテキストを表示領域外にとばしてしまうのは、サーチエンジンに対してスパム行為になってしまうのではと考える人もいます。(現状ではは問題ないようですが将来的に)

それでも、CSSだけでロールオーバーできれば、ユーザーがJavaScriptを無効にしても問題ないので捨てがたい方法です。

そこで、イメージ置換の手法を使わずにCSSだけでロールオーバーを実現するサンプルを作ってみました。

サンプル

イメージ置換や以前紹介したロールオーバースクリプトなど、それぞれのメリット、デメリットを考慮し、状況にあった方法を検討してください。

UP