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

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

1 个答案: