ボックス全体にリンクを設定してクリック可能にする（jQuery・CSS）

次のようなHTMLでボックス内にリンクを設置した場合、「ボックス全体をリンクにしたい」がうまくいかない場合があります。

<div class="link1">
<a href="sample.html">クリック！</a>
</div>

こんな感じです。ボックス全体がリンクになっていないためクリックしても反応しないエリアがあります。

問題なければ良いのですが、場合によってはユーザーから「あのパーツをクリックしても反応しない！」の苦情がくることもあります。

その場合、次のようなjQueryを使ってボックス全体にリンクを設定する方法があります。

<script>
jQuery(function() {
    jQuery('.link1').click(function() {
        location.href = jQuery(this).find('a').attr('href');
    });
});
</script>

合わせてマウスオーバー時にカーソルの形状を変更するCSSを設定しておくとよいでしょう。

.link1:hover {
    cursor: pointer;
}

これで、ボックス内の全体がクリック可能になります。