2

画像にカーソルを合わせると div を表示する小さな jquery スクリプトを作成しています (製品の技術仕様を表示するため)。私の問題は、ホバーすると、マウスが画像ではなく新しい div をホバーしているため、新しい div が読み込まれて消えてしまうことです。点滅しないようにこれを解決する方法はありますか？

http://jsfiddle.net/uWRLr/

$(document).ready(function(){
    $('.hover').hover(function(){
        $('.techinfo').fadeIn(500)
    },function(){
        $('.techinfo').fadeOut(500)
    })
})
4

3 に答える 3

2

すべてをコンテナーにラップし、代わりにホバー イベントをコンテナーにアタッチします。

<div class="main-container">
    <img class="hover" src="http://charlescorrea.com.br/blog/wp-content/uploads/2012/02/google-small.png" />
    <div class="techinfo">Here's the text</div>
</div>

...そしてあなたのJavascript：

$(document).ready(function(){
    $('.main-container').hover(function(){
        $('.techinfo').fadeIn(500)
    },function(){
        $('.techinfo').fadeOut(500)
    })
});

このようにして、コンテナに出入りすると、機能が利用可能になります。ここにフィドルがあります。

于 2013-09-24T22:15:53.410 に答える
1

2 番目の function() を削除して、終了ホバー機能を持たないようにします。

$(document).ready(function(){
    $('.hover').hover(function(){
        $('.techinfo').fadeIn(500)
    })
})

2 番目の関数は、画像のホバリングを停止するたびに実行されるため、削除すると停止し、div は表示されたままになります。

編集：私は質問を完全に読んでいませんでした.Chris Kempenの答えは、求められていたものとより一致しています。

于 2013-09-24T22:14:22.437 に答える