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()これはjQuery1.7の新機能であり.bind()、この場合と同じであることに注意してください。

アップデート

figureリンクがタグの親になるようにHTMLの構造を変更するのはどうですか。

<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 に答える