2

Jqueryには、子ではないmouseout()特定の関数を超えたときに関数のアクティブ化を停止する方法があります。div私のhtmlコード。

 <div class="featured">
            <div class="featured_top">
                    <p><span class="theme">Theme</span> Transparent </p>                                        
            </div>
            <div class="pic" style="background: blue">
                <!-- image -->                              
            </div>
            <div class="featured_des">
                <p> this is awesome theme </p>
            </div>                                  
  </div>

私のjs（jQuery）

$(document).ready(function(){
      $(".pic").mouseover(function(){
        $(this).animate({
            width: 0                        
            });
        });

        $(".pic").mouseout(function(){
            $(this).animate({
                width: 214                      
            });

             });
       });

だから私の質問は、それがdivのmouseout()ときに関数がアクティブになるのを止めることができるかということです。featured_desatmは.picクラスの幅をアニメーション化しますが、これは正常に機能しますが、終了animateするとカーソルが上にあり、featured_desがアクティブにmouseoutなり、説明が再び非表示になります。

例:: http ：//www.grubber.co.nz/developer/_social_development/market.html

4

3 に答える 3

1

picとの周りにラッパーを追加しますfeatured_des。

    <div class="picwrapper">
        <div class="pic" style="background: blue">
            <!-- image -->                              
        </div>
        <div class="featured_des">
            <p> this is awesome theme </p>
        </div>
    </div>

次にJS：

$('.picwrapper').hover(function() {
    $(this).find('.pic').animate({ width: 0 });
}, function() {
    $(this).find('.pic').animate({ width: 214 });
});
于 2012-11-16T21:52:07.607 に答える
0

「mouseout」は、マウスが特定の要素を離れるときに起動します。マウスが離れる原因に関係なく。あなたの場合、サイズを変更すると、picが小さすぎて、マウスがその上に表示されなくなります。

HTMLを変更して、「コンテナ」として分類されたdivで機能の説明とPicの両方を囲み、ホバーしたオブジェクトが消えてマウスアウトが発生しないようにします。

<div class="featured">
        <div class="featured_top">
                <p><span class="theme">Theme</span> Transparent </p>                                        
        </div>
        <div class="container">
             <div class="pic" style="background: blue">
                 <!-- image -->                              
             </div>
             <div class="featured_des">
                 <p> this is awesome theme </p>
             </div>                 
        </div>                 
</div>

そしてあなたのjQuery

$(document).ready(function(){
      $(".container").mouseover(function(){
          $(this).find('.pic').animate({
                 width: 0                        
          });
      });

      $(".container").mouseout(function(){
          $(this).find('.pic').animate({
                 width: 214                      
          });
      });
});
于 2012-11-16T21:52:25.060 に答える
0

私はあなたが探していると思うmouseenterのでmouseleave、イベントはバブルしません：

$(document).ready(function() {
    $(".pic").width($(".pic .container img").width());
    $(".pic").height($(".pic .container img").height());
    $(".pic").mouseenter(function() {
        $(".pic .container").animate({
            width: 0
        }, function() { $(".pic .container img").hide(); });
    });

    $(".pic").mouseleave(function() {
        $(".pic .container img").show();
        $(".pic .container").animate({
            width: 214
        });

    });
});

これがフィドルです。

于 2012-11-16T22:11:45.573 に答える