他の要素の下にクリックするとリンクが切れます

Question

私に画像リンクがあります。ユーザーが画像の上を移動すると、上部に情報パネルが表示され、その下に画像が表示されます。問題は、情報パネルが画像リンクをカバーしているため、画像リンクをクリックできないことです。

私の質問：画像リンクをクリック可能にするにはどうすればよいですか（または、効果は同じですが画像全体をクリックできるようにコードを変更するにはどうすればよいですか）。

更新：jQueryをクリックできない通常のリンクが必要です。私の理由から私のコメントを見てください。

ワーキングHTMLとデモ、jQueryとCSS

http://jsbin.com/ufecob/2/edit#html,live

HTML

<figure class="item"> 
    <a href="http://google.com/" title="Thumb"><img src="http://f.cl.ly/items/2u2i3K1H1d1D02072T3Q/soc-google.png" /></a> 
    <figcaption class="name visuals"><h1>Title</h1><p>Description</p></figcaption> 
</figure> 

jQueryの

$(document).ready(function(){ 
    $('.item').hover(function(){ 
     $(this).children('.name').stop().fadeTo(100, .5); 
    },function(){ 
     $(this).children('.name').stop().fadeTo(900, 0); 
    }); 
}); 

カーソルのポインタを作るために、その後、いくつかのjQueryをオーバーレイにクリックハンドラを追加するためにCSSを追加する方法について

#items { 
     padding:0px; 
     display:block; 
    } 
#items .item { 
     display:block; 
     position:relative; 
     float:left; 
     width:200px; 
     max-width:200px; 
    } 
#items .item a { 
     display:block; 
     text-decoration:none; 
     position:relative; 
    } 
#items .name a:hover { 
     color: #000; 
    } 
#items .item .name { 
     display: none; 
     background-color: #000; 
     color: #fff; 
     position: absolute; 
     left: 0px; top: 0px; 
     margin: 0px; 
     width: 100%; height: 100%; 
    } 

Answer 1

どのようにCSS：

CSS--

.name { 
    cursor : pointer; 
} 

JS -

$('.name').on('click', function() { 

    //this will find the link that is the overlay's sibling, find its href attribute, and forward the user to that URL 
    window.location = $(this).parent().children('a').attr('href'); 
}); 

ここにjsbinの最新バージョンがあります：http://jsbin.com/ufecob/3/edit

.on()は、jQuery 1.7で新しく、この場合は.bind()と同じです。ここで

<a href="http://google.com/" title="Thumb"> 
    <figure class="item"> 
     <img src="http://f.cl.ly/items/2u2i3K1H1d1D02072T3Q/soc-google.png" /> 
     <figcaption class="name visuals"><h1>Title</h1><p>Description</p></figcaption> 
    </figure> 
</a> 

はデモです：：http://jsbin.com/ufecob/4/edit#html,live