jquery - jqueryマウスオーバー

Question

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

score 1 · Accepted Answer

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 });
});

score 0 · Accepted Answer

「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                      
          });
      });
});

score 0 · Accepted Answer

私はあなたが探していると思う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
        });

    });
});

これがフィドルです。

jquery - jqueryマウスオーバー

3 に答える 3

Related

Reference