1

こんにちは、このコードを入手して、mouseenter を処理し、2 つの重ね合わせた div のままにします

ユーザーがメイン div にマウスを入力すると、サブ div が表示されます。ユーザーがサブ div に入った場合、サブ div はそのままにしておく必要がありますが、ユーザーがメイン div を出てサブ div にない場合、サブ div を非表示にする必要があります。私の jsfiddle で試してください。http://jsfiddle.net/rgkcp/

しかし、タイマーは私のコードでは実行されません

  $(".bulleHome").each(function () {
      var subDiv = $(this).find(".mupHome");
      $(this).mouseenter(function () {
          $(this).find(".mupHome").css("visibility", "visible");
          $(this).find(".mupHome").animate({
              marginTop: '-23px'
          });
      });
      $(this, subDiv).mouseleave(function () {
        // this is not run
          timer = setTimeout(function () {
              $(this).find(".mupHome").css("visibility", "hidden");
              $(this).find(".mupHome").animate({
                  marginTop: '+23px'
              })
          }, 50);
      });
      $(this, subDiv).mouseenter(function () {
          clearTimeout(timer);
      });
  });

そしてhtml：

<div class="bulleHome ombreV">
    <a href="http://preprod.mupiz.com/georges-barret" style="font-size:0.7em;text-decoration:none;" pid="13200">
        <img src="http://www.mupiz.com/images/img-membres/images_4958C.jpg" alt="Georges profil" height="100px"><br>
    </a>
    <div class="mupHome" style="visibility: visible; margin-top: -23px;">
        <img src="http://www.mupiz.com/images/mupitR.png" alt="Mup It!" id="bouton-ajout-ami13200" onclick="alert('ok')" style="cursor: pointer;"><span class="tMupHome">Mup it!</span>

    </div>
</div>

そしてリンクされたcss：

.mupHome{position:absolute;color:#fff;background: rgb(0, 0, 0) transparent;background: rgba(0, 0, 0, 0.8);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";width:100px;visibility:hidden;height:19px;}
.tMupHome{position:relative;top:-8px;left:5px}

何か案は ？

Js フィドル: http://jsfiddle.net/rgkcp/

ありがとう！

4

2 に答える 2

0

マウスがサブ div を離れると、div が邪魔にならないように移動して消えるようにしたいと思います。その場合、これはうまくいくはずです。そうでない場合は、間違いなく明確にすることができます。アニメーションの前に可視性を変更していたため、アニメーションは表示されません。フィドルにもいくつかの引用符がありませんでした。

    $(".bulleHome").each(function () {
  var subDiv = $(this).find(".mupHome");
  $(this).mouseenter(function () {
      $(this).find(".mupHome").css("visibility", "visible");
      $(this).find(".mupHome").animate({
          marginTop: '-23px'
      });
  });
});
// Added Code 
$('div.mupHome').on({
mouseleave: function() {
$(this).animate({marginTop: '+0px'}, 1000, function(){$(this).css('visibility', 'hidden');});}
});

また、mupHome div では、スタイルが正しく閉じられていませんでした。これが実際のコードに当てはまるかどうかはわかりません

<div class="mupHome" style="visibility: visible;>

する必要があります

<div class="mupHome" style="visibility: visible;">
于 2013-05-29T20:04:39.960 に答える
0

var X を作成して false に設定することをお勧めします。次に、マウスが SubDiv の上に移動したら、それを true に設定します。

$(".mupHome").mouseenter(function () {
      ondiv = true;
  });

この後、最初の div を離れるときに var X が true に設定されているかどうかを確認する必要があります。そうであれば、何もしません。まだ false に設定されている場合は、 SubDiv を非表示にします。

$(this, subDiv).mouseleave(function () {
      if(ondiv === false)
      {
          $(".mupHome").animate({
              marginTop: '23px'
          },function() {
              $(".mupHome").css("visibility", "hidden");
          });

      }
});

これがjsFiddleです。

于 2013-05-29T20:08:59.777 に答える