當其他元素下可點擊鏈接中斷

我有一個圖像鏈接。當用戶將鼠標懸停在圖像上方時，頂部會顯示一個信息面板，而圖像在底部仍然可見。問題是，圖像鏈接不可點擊，因爲信息面板覆蓋了它。當其他元素下可點擊鏈接中斷

我的問題：如何使圖像鏈接可點擊（或者如何更改代碼以使效果相同但可以點擊整個圖像）？

更新：我想有正常的鏈接，不使用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); 
    }); 
});

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%; 
    }

來源

2011-12-11 robflate

如何添加CSS使光標指針，然後一些jQuery來點擊處理程序添加到覆蓋：

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()相同。

UPDATE

如何改變你的HTML的結構，使該環節是figure標籤的父：

<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

來源

2011-12-11 01:46:46 Jasper

我應該有提到我已經按照你的建議工作了，但我想使用正常的href鏈接而不是使用jQuery。那可能嗎？感謝您的幫助:) – robflate

只是爲了澄清我想要使用正常鏈接的原因。我不喜歡如何使用JavaScript的鏈接打破了Web瀏覽器的基本工作方式;使用JavaScript，你不能通過控制點擊鏈接在新標籤中打開。當懸停在鏈接上時，網址不會顯示在狀態欄中。右鍵單擊不會爲鏈接提供正常的上下文相關菜單。等等希望有一個方法可以解決我的問題，不會導致這些問題。 – robflate

@robflate如何改變你的HTML結構，以便鏈接是'figure'標籤的父級：http://jsbin.com/ufecob/4/edit#html,live – Jasper

當其他元素下可點擊鏈接中斷

回答

相關問題