在其他元素下可点击的链接中断

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

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 以使光标成为指针，然后添加一些 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() 相同。

更新

如何更改 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