0

我有一个图片链接。当用户将鼠标悬停在图像上时，顶部会出现一个信息面板，而图像下方仍然可见。问题是，图像链接不可点击，因为信息面板正在覆盖它。

我的问题：如何使图像链接可点击（或如何更改代码以使效果相同但可以单击整个图像）？

更新：我希望有不使用 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%;
    }
4

1 回答 1

0

如何添加 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

于 2011-12-11T01:46:46.360 回答