0

ホバー時にdivをフェードするためにjqueryを使用していますが、表示されたアンカーリンクは選択できません。

$('#show').hover(function() {
    $(this).stop(true).fadeTo("slow", 0);
}, function() {
    $(this).stop(true).fadeTo("slow", 1);
});

色あせた div は、実際にはまだ非表示の div の上にあるように見えます。

例: http://jsfiddle.net/BJwn7/81/

リンクを選択可能にするにはどうすればよいですか?

4

4 に答える 4

2

jquery フェードを使用すると、要素の不透明度が変更されるだけです

そのため、オーバーレイされた画像はまだリンクの上にありますが、その不透明度は 0 です。

フェードの後、そのスタイルをに設定するdivを非表示にする必要がありますdisplay: none

$('#container').hover(function() {
    $('#show').stop(true).fadeTo("slow", 0, function() { $(this).hide(); });
}, function() {
    $('#show').stop(true).fadeTo("slow", 1, function () { $(this).show(); });
});

ここにjsfilddleがあります http://jsfiddle.net/ddvcJ/

于 2013-08-14T11:55:29.027 に答える
1

jQuery を次のように変更してみてください。

$('#container').hover(function() {
    $('#show').fadeOut("slow");
}, function() {
    $('#show').fadeIn("slow");
});

作業フィドル: http://jsfiddle.net/BJwn7/86/

于 2013-08-14T11:53:54.633 に答える
1

いくつかの css と jquery コードを変更しました このデモをチェックしてください

<div id="container" style="position: relative">
    <img id="show" src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="" height="300px"/>
    <div id="hidden"><a href="#">link</a></div>
</div>


#container {
    width: 166px;
}
#hidden {
    position: absolute;
    top: 0;
    left: 0;
    height: 300px;
    width: 166px;
    background: red;
    display:none;
}

$(document).ready(function(){
  $("#container").hover(function(){
    $("#hidden").fadeToggle("fast");
  });
});
于 2013-08-14T11:54:33.943 に答える