0

json文字列からのデータで作成されたdivがいくつかあります。それらのほとんどは画像です。それらの動的にロードされた画像の上に、マウスオーバーするとdivを表示し、マウスアウトすると非表示にします。したがって、私はライブ機能を使用しました。これはフォーラムで見つけました。マウスオーバー機能は機能しますが、マウスアウトしません。したがって、1つの画像にカーソルを合わせると、divが表示されますが、マウスを離してもdivは表示されます。これに関する提案はありますか?

私のコード

<script type="text/javascript">
    $('.product').live("hover", function() {
        $(this).find('.product').stop(false,true); // get the image where hovering
        $(this).find('div.caption').stop(false,true).fadeIn(100); // and fade in
    },
     function() {
        $(this).find('.product').stop(false,true); // on mouse leave hide it  
        $(this).find('div.caption').stop(false,true).fadeOut(100); // fade out
     });
</script>

更新された回答 以下のヘルプのおかげで、私は解決策を見つけました。

$(".productsGrid .product").live("mouseenter", function() {$(this).find('.product').stop(false,true);
$(this).find('div.caption').stop(false,true).fadeIn(100);})
$(".productsGrid .product").live("mouseleave", function() { $(this).find('.product').stop(false,true);   
$(this).find('div.caption').stop(false,true).fadeOut(100);});
4

1 に答える 1

2

問題はlive、関数のように2つではなく、1つの関数パラメーターのみを受け取ることhoverです。hoverwithを使用すると、基本的に1つの関数がとの両方にliveバインドされます。mouseentermouseleave

ここで説明と解決策を見ることができます。

ただし、1.7より前のバージョンのjqueryを使用している場合を除き、live非推奨であるため使用しないでください。代わりにを使用する必要がありますon

コードは次のようになります。

$(STATIC ANCESTOR).on({ 
        mouseenter: 
           function() 
           { 

           }, 
        mouseleave: 
           function() 
           { 

           } 
       }, ".product"
    ); 

Whereは、動的にロードされない要素STATIC ANCESTORの祖先要素に置き換えられます。.product必要に応じdocumentて使用できますが、最後の手段としてのみ使用してください。

于 2012-09-28T21:08:55.637 に答える