javascript - mouseenter + mouseleave/hover 在两个不同的 div 上

Question

嗨，我有这段代码来处理 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 fiddle :http://jsfiddle.net/rgkcp/

谢谢!

Answer 1

我建议你创建一个 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 .