火曜日, 3月 02, 2010

テキストリンクのホバー時に背景をアニメーションで変更するスクリプト

複数行のテキストリンクにも対応した、ホバー時に背景をアニメーションで変更するスクリプトをCSS-Trickから紹介します。

デモのキャプチャ

Link Underlines Grow to Backgrounds on Hover
デモページ

デモはTechnique #1から3まであり、キャプチャはIE7に対応したTechnique #3です。

Technique #3はIE7でも下記のように複数行のテキストリンクにも対応しています。

デモのキャプチャ

二行に渡るテキストリンクにも対応

こういったテクニックを利用する際、HTMLにspanなどを記述することがありますが、ここで紹介するテクニックのHTMLは通常のa要素のみとなっています。

実装のイメージ

実装のイメージ

0 件のコメント: