[JS]テキストリンクのホバー時に背景をアニメーションで変更するスクリプト
Post on:2010年3月1日
複数行のテキストリンクにも対応した、ホバー時に背景をアニメーションで変更するスクリプトをCSS-Trickから紹介します。
Link Underlines Grow to Backgrounds on Hover
デモページ
デモはTechnique #1から3まであり、キャプチャはIE7に対応したTechnique #3です。
Technique #3はIE7でも下記のように複数行のテキストリンクにも対応しています。
二行に渡るテキストリンクにも対応
こういったテクニックを利用する際、HTMLにspanなどを記述することがありますが、ここで紹介するテクニックのHTMLは通常のa要素のみとなっています。
実装のイメージ
sponsors