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