-2

要素のJqueryホバーが<a>実行されませんか?

画像にカーソルを合わせたときにボタンを表示したい。Jquery hover を使用してそれを行いますが、成功しません。これにはあなたの助けが必要です。ここに私のデモがあります: http://jsfiddle.net/happi/t5u28/

ご協力いただきありがとうございます

4

6 に答える 6

2

fiddle の例の DOM を見ると、内側の<a>タグが外側のタグの外側に移動され、兄弟になっていることがわかります。.find()そのため、アウターの子孫ではないため、呼び出すことができません<a>

jQuery(function() {    
    jQuery(".the-button").hide();
    jQuery('a.show-image').hover(function() {
         jQuery('.the-button').fadeIn(1500);
    }, function() {
        jQuery('.the-button').fadeOut(1500); 
    });
});

ホバーされた<a>タグの子を検索しようとしているのではなく.the-button、ドキュメント内の要素を検索しようとしているため、機能します。より良い HTML 構造を考え出す必要があります。

于 2013-09-11T04:54:53.013 に答える
1

あなたのフィドルコードのように、jsを変更します

jQuery(function() {    
    jQuery(".the-button").hide();
    jQuery('a.show-image').hover(function() {
        jQuery('.the-button').fadeIn(1500);
    }, function() {
        jQuery('.the-button').fadeOut(1500); 
    });
});

デモを見る

于 2013-09-11T04:56:33.757 に答える
1

あなたの要件を適切に理解していれば、これでうまくいくはずです。

<!-- Move second anchor outside the first one and let CSS handle the overlay effect -->
<a href="#" class="show-image">
    <img src="http://www.uniqlo.com/us/tiles/images/20130814/520bee8eae8a1.jpg" />   
</a>

<a href="#" class="the-button">Button here</a>

$( document ).ready(function() {
    $(".the-button").hide();


    $('a.show-image').mouseenter(function() {
      //  alert("hover");
         $('.the-button').fadeIn(1500);
    });

    $('a.show-image').mouseleave(function() {
      //  alert("hover");
         $('.the-button').fadeOut(1500);
    });
});

http://jsfiddle.net/jamespoulson/FPuSW/

PS: コードは、fadeToggle を使用して要約できます: http://api.jquery.com/fadeToggle/

于 2013-09-11T04:58:50.647 に答える
1 
$( document ).ready(function() {
    $(".the-button").hide();
    $('a.show-image').hover(function() {
       $('.the-button').fadeIn(1500);
    },function()
    {
       $('.the-button').fadeOut(1500);
    });
});
于 2013-09-11T05:02:38.243 に答える
1

<a>アンカー内に別のものを持つことはできません。画像をdiv 

jQuery(function() {    
    jQuery(".the-button").hide();
    jQuery('.show-image').hover(function() {
         jQuery(this).find('.the-button').fadeIn(1500);
    }, function() {
        jQuery(this).find('.the-button').fadeOut(1500); 
    });
});

フィドル

于 2013-09-11T04:59:38.163 に答える