ボックスごとリンク化する

Ads

Result

jQuery

$(document).ready(function() {
    //class="box"をクリックでイベント発火
    $('.box').click(function() {
        //a要素からhref属性を探して中身を取得し、そのURLに飛ばす。別窓なら('href'), '_blank'とすればOK
        window.location = $(this).find('a').attr('href');
        return false;
    });
});

HTML5ならボックス要素にリンク貼れますのでこのコードは不要ですね。

css

.box{
    background: #eee ;
    padding: 50px ;
    margin:50px;
    height: 200px ;
    width: 200px ;
    cursor: pointer;
}
.box:hover{background: #ddd ;}

html

<div class="box">
      <a href="http://kachibito.net/">kachibito.net</a>
</div>

via

Make Entire Div Clickable | CSS-Tricks

タイトルとURLをコピーしました