2

重複の可能性:
jqueryを使用してマウスオーバーでdivを表示/非表示にする方法は?

私はこのようなdivを持っています:

<div id="parent">
     foo
      <div id="child" style="display:none;">
         hidden
       </div>
</div>

child誰かがマウスをdivの上に移動するたびにdivparentを表示し、マウスを離したときに親divを非表示にしたいと考えています。

ただし、これを行うと：

$("#parent").mouseover(toggle);
$("#parent").mouseout(toggle);
function toggle()
{
   console.log('here');
   $("#child").toggle();
}

次に、#parent div の上にマウスを移動するたびに、両方のイベントが 2 回呼び出されるようです。どうすれば私が望むものを達成できますか?

4

8 に答える 8

6 
$("#parent").hover(
   function(){
      $("#child").show();

   },
   function(){
      $("#child").hide();
   }
)
于 2012-08-07T09:29:33.830 に答える
3

cssを追加してはどうですか？

#親 #子{表示:なし;}

#parent:hover #child{display:block;}

と

 <div id="parent">
         foo
          <div id="child" >
             hidden
           </div>
    </div>
于 2012-08-07T09:30:56.403 に答える
1

トグル機能は使用しないでください!!

次のようなものを試してください。

$("#parent").hover(function(){
  $("#child").show();
}, function(){
  $("#child").hide();

}）

これはおそらくうまくいくはずです!!

于 2012-08-07T09:31:56.913 に答える
1

この場合、トグルを使用しないでください。常にマウスアウトで非表示にし、マウスオーバーで表示したい場合は、そのように定義してください:)

$("#parent").mouseover(function() {
    $("#child").fadeIn(); // or .show() for no fading
});

$("#parent").mouseout(function() {
    $("#child").fadeOut(); // or .hide() for no fading
});
于 2012-08-07T09:29:43.207 に答える
1

短い:

$("#parent").hover(function () {
   $("#child").toggle(); 
});​

デモ。

注:またはtoggleで代用できます。fadeToggleslideToggle

于 2012-08-07T09:33:43.890 に答える
0

このように.hover（）を試すことができます。

$('#divid').hover(
function(){
 //mouseenter function
},
function(){
 //mouseleave function
}
);
于 2012-08-07T09:31:27.060 に答える
0

次のようなものを使用する必要があります。

$("#parent").mouseover(function(){
    $('#child').show();
});
$("#parent").mouseout(function(){
    $('#child').hide();
});​

jsFiddle の例: http://jsfiddle.net/phcwW/

于 2012-08-07T09:33:47.663 に答える
0 
<div id="parent" onmouseover="callMouseOver()" onmouseout="callMouseOut()">
     foo
      <div id="child" style="display:none;">
         hidden
       </div>
</div>

JS メソッド:

function callMouseOver(){
    document.getElementById("child").style.display = "inline";
}

function callMouseOut(){    
    document.getElementById("child").style.display = "none";    
}
于 2012-08-07T09:52:25.070 に答える