-4

このような複数の行を含むページがあり、それぞれが<div id="result">;で囲まれています。

<div id="result"><a href="http://www.domain.com/">Link Name</a><iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px" scrolling="no"></iframe></div>

現在、次のjQueryを使用して、<a>ホバー時にタグを表示しています。

$(document).ready(function(){
    $('#result iframe').hover(function(){
        $('#result a').fadeIn(200);
    },function(){
        $('#result a').fadeOut(200);
    });
});

ただし、ホバーは最初にのみ機能し、ユーザーがホバーしたものだけでなく、すべてのタグ<div id="result">も表示します。<a><div id="result">

どうすればこれを修正できますか?

4

4 に答える 4

1

私があなたの奇妙なことを理解していると仮定すると：

HTML

    <div class="result">
        <a href="http://www.domain.com/" style="display:none;">Link Name</a>
        <iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px;background:red;" scrolling="no"></iframe>
    </div>
    <div class="result">
        <a href="http://www.domain.com/" style="display:none;">Link Name</a>
        <iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px;background:red;" scrolling="no"></iframe>
    </div>

jQuery

$('.result iframe').hover(function(e) {
   $(this).parent().find('a').fadeIn(); 
}, function() {
     $(this).parent().find('a').fadeOut();   
});

フィドルを見る

ホバーで編集します。

注意：e.preventDefault();クリックしてリンクを送信したくない場合は、クリックイベントで。

于 2013-02-09T15:54:32.457 に答える
1

あなたはこれを試すことができます -resultsクラスへの変更

$(document).ready(function(){
    $('.result').hover(function(){ // <-- change to class.. and bind to wrapper div
        $(this).find('a').fadeIn(200);
    },function(){
        $(this).find('a').fadeOut(200);
    });
});
于 2013-02-09T16:20:28.533 に答える
0

次のようにしてみてください。

$(document).ready(function(){
$('#result iframe').hover(function(){
    $('#result a').fadeIn(200);
    $('#result a').fadeOut(200);
});
});
于 2013-02-09T15:44:27.703 に答える
0

<a>すべてではなく特定のタグのみをキャッチしたい場合<div id="result">は、jQuery コードでそれを指定してみてください。次に例を示します。

$(document).ready(function(){
    $('#result:nth-child(1) iframe').hover(function(){
        $('#result:nth-child(1) a').fadeIn(200);
    },function(){
         $('#result:nth-child(1) a').fadeOut(200);
    });
});

したがって、これは id="result" を持つ最初の div のみをターゲットにします。nth-child(0) - nth-child(1) - nth-child(2) ... を変更して、他のものをキャッチします。

別の解決策: すべてのタグに id を設定することも<a>、クラスを使用して必要な特定の要素をキャッチすることもできます。

于 2013-02-09T16:00:58.120 に答える