4

画像/リンクホバーにDIVを表示したいのですが、次のコードを記述しました

   $("#NotificationSummary").hover(
      function () {
          $("#dvNotifications").slideDown();
      },
      function () {           

          $("#dvNotifications").slideUp();
      }
    );

DIVはホバーに表示されていますが、divに移動すると非表示になります。マウスを上に置いているときに、divが非表示になるのを防ぐにはどうすればよいですか。

デモをご覧くださいhttp://jsfiddle.net/3hqrW/15/

4

3 に答える 3

3

[コメントに基づいて再編集]jsfiddleが改訂され、cssのみのソリューションが削除されました。秘訣は、スライド要素のホバー状態を監視し、タイムアウトを使用して、ユーザーがスライド要素上を移動できるようにすることです（更新されたjsfiddleのコメントも参照してください）。

OPから派生したjsfiddlejsfiddle@ here

#idsを使用したホバー関数：

function hover(e){
 e = e || event;
 var el = e.target || e.srcElement
    ,showel = $('#dvNotifications')
 ;
 if (!/NotificationSummary/i.test(el.id)) {
  showel .attr('data-ishovered',/over/i.test(e.type));
 } else {
  showel .attr('data-ishovered',false)
 }

 if (/true/i.test(showel .attr('data-ishovered'))){return true;}

 if (/over$/i.test(e.type) && /NotificationSummary/i.test(el.id)){
    showel .slideDown();
 } else {
    setTimeout(function(){
        if (/false/i.test(showel .attr('data-ishovered'))) {
            showel .slideUp();
            showel .attr('data-ishovered',false);
        }
      }
    ,200);
 }

}

于 2012-06-25T07:02:47.273 に答える
1

Tanveer は、このデモを親切に参照してください: http://jsfiddle.net/rathoreahsan/3hqrW/

ホバー時に表示する div は、ホバーするメイン div 内にある必要があり、メイン div には css 属性が必要です。display:block

別のデモ: http://jsfiddle.net/rathoreahsan/SGUbC/

于 2012-06-25T06:10:48.973 に答える
-1 
  $("#NotificationSummary").mouseenter(function() {
       $("#dvNotifications").fadeIn();
  }).mouseleave(function() {
      $("#dvNotifications").fadeOut();
  });
于 2012-06-25T07:09:17.123 に答える