0

divにカーソルを合わせると、その中にネストされた要素が表示されるdivがあります。これは機能します。

マウスアウトでは、ネストされた要素は非表示になるはずですが、非表示になりますが、最初のdivにカーソルを合わせたように、すぐに再びフェードインします。

ここで問題を複製するjsfiddleを作成しました。

htmlは次のとおりです。

<div class="add_bag_large_wrap">

<div class="add_bag_large_droid" style="margin: 90px auto;">
        I am a button.
    <div class="add_includes">
        <p>Show on hover, hide on mouseout</p>

    </div>
</div>

</ p>

JS：

 $('.add_bag_large_droid').live('hover',function(){

     $(this).children('.add_includes').fadeIn();         

 }).mouseout(function(){

     $('.add_includes').fadeOut();

 });
 ​

CSS：

.add_bag_large_wrap {
position: relative;
width: 390px;
height: 96px;
margin: 36px auto;
}

.add_bag_large_droid {
background: #ccc;
width: 390px;
height: 96px;
cursor: pointer;
background-size: 390px 192px;
position: static;
}

.add_includes {
background: #000; padding: 18px; color: #fff; position: absolute; 
bottom: 110px; left: 50%; margin-left: -148px;
display: none;
text-align: left;
}

.add_includes p {
font-size: 11px; color: #fff; margin: 0;
}

この動作の原因は何ですか？

4

6 に答える 6

4

JSコードも変更します。

 $('.add_bag_large_droid').hover(function(){
     $(this).find('.add_includes').fadeIn();         
 }, function(){
     $(this).find('.add_includes').fadeOut();
 });

使用live()：

$('.add_bag_large_droid').live({
    mouseover: function() {
        $(this).find('.add_includes').fadeIn();  
    },
    mouseout: function() {
        $(this).find('.add_includes').fadeOut();
    }
});
于 2012-08-17T13:34:38.797 に答える
1

これを試して

$('.add_bag_large_droid').hover(function(){

     $(this).children('.add_includes').fadeIn();         

 },function(){

     $('.add_includes').fadeOut();

 });
 ​
于 2012-08-17T13:44:33.653 に答える
0

.add_bag_large_droidDOMが最初にロードされたときに要素が存在しない場合は、イベントを委任するために使用する必要がありdelegateますlive。

$('.add_bag_large_wrap').delegate('add_bag_large_droid',{
    'mouseover': function(){
        $(this).children('.add_includes').fadeIn();         
    },
    'mouseout': function(){
        $('.add_includes').fadeOut();
    }
});

$('.add_bag_large_wrap')DOMのロード時に存在することが保証されている最も近い祖先を表します。別の要素の場合は、セレクターを変更してください。

于 2012-08-17T13:37:46.877 に答える
0

このコードを試してください...

$('.add_bag_large_droid').mouseover(function(){

     $(this).children('.add_includes').fadeIn();         

 });

 $('.add_bag_large_droid').mouseout(function(){

     $('.add_includes').fadeOut();

 });
于 2012-08-17T13:38:46.627 に答える
0 
$('.add_bag_large_droid').hover(
    function() {
         $(this).children('.add_includes').fadeIn();
    },
    function() {
         $('.add_includes').fadeOut();
    }
);

これは機能するはずです。hover（）を使用してmouseenterイベントとmouseleaveイベントの両方をバインドできます。上記は以下と同じです。

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

次のものも使用できます。

$(selector).mouseover(handlerIn).mouseout(handlerOut);
于 2012-08-17T13:39:56.300 に答える
0

jqueryの最新バージョンでは、次のようになります。

$(".add_bag_large_droid").on({
  mouseenter: function(){
         $(this).children('.add_includes').fadeIn();  
  },
  mouseleave: function(){
         $(this).children('.add_includes').fadeOut();  
  }});
​

ただし、jqueryバージョン1.6.4を設定します。この場合、スクリプトは同じですが、のlive代わりに使用しonます。

コード： http： //jsfiddle.net/jSStY/4/

于 2012-08-17T13:40:37.503 に答える