マウスオーバーにリンクがあるとDIV要素の背景とかが変更できるjQueryのプラグインについて。マウスオーバー時にちょっと背景、テキストカラーを変更出来る範囲をDIV要素まで広げる事ができます。ギミックと言われれば、それまでですが、工夫次第でいい感じになるんではとおもうので、とりあえず試しに。

サンプル

新規ウィンドウでひらけないみたいなので、リンクはリンクタタグに囲まれたところしか効きませんが、Javascriptのところを

$('.news .unit').biggerlink();

と記述すればDIVタグ内ならどこでもリンクできます。ちなみに

.biggerlink({follow:false});

の設定をすると、一個目のリンクしか機能しなくなります。

プラグインのダウンロードはここから
http://www.ollicle.com/eg/jquery/biggerlink/

jQueryのダウンロードはこちらから
http://jquery.com/

動作環境

• Firefox 2.0.0.7 (Mac)
• IE 7 and 6
• Safari 3.0.3 (PC)
• Opera 9.24 (Mac + PC)

Javascript記述方法

<script type="text/javascript"src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="jquery.biggerlink.js"></script>
<script type="text/javascript">
$(function(){
$('.news .unit').biggerlink();
});
</script>

クラス or ID名（#note .newsとか）

CSSの記述方法

.hover {
border-color: #A3A16A;
cursor: pointer;
background-color: #DFE6CB;
}

.hover a:link {color: #A8C25D;}

.hover a:visited {color: #CC3333;}

HTMLの記述

<div class="news unit">
<h2><a href="/blog/">マーケティング（marketing）とは</a></h2>
<p>平たく言えば、企業などが行う活動のうち「顧客が真に求める商品・サービスを作り、届ける活動」全体を表す概念である。</p>
<p><a href="/blog/" title="">Read more</a></p>
</div>

という感じでできみたいです。

WIREDVISONというサイトが結構すきで結構みるんですが、そこのサイトにも実装されてます