親要素にdisplay:blockしてabsoluteして・・・という風にすることでa要素をブロック全体に反映させることができるが、もっと簡単にできる方法があるので紹介。
ＣＳＳ
|
1 2 3 |
[ID^="column"]:hover .x-text { color: #1d8f59;/*ホバーした際の任意カラー*/ } |
ＪＳ
|
1 2 3 4 5 6 7 |
(function($) { $("#column_1").wrap("<a href='[fripost name=url]'></a>"); $("#column_2").wrap("<a href='[fripost offset=2 name=url]'></a>"); $("#column_3").wrap("<a href='[fripost offset=3 name=url]'></a>"); $("#column_4").wrap("<a href='[fripost offset=4 name=url]'></a>"); $("#column_5").wrap("<a href='[fripost offset=5 name=url]'></a>"); })(jQuery); |
設定方法
リンクさせたい要素にID指定(column_1)をする。
CSSの内容は、ID指定した部分がホバー(マウスカーソルを合わせた)した場合に、テキストの文字を設定したカラーコードに変更するというもの。
JSの内容はID設定した部分にa要素を追加するというもの
コメントを残す