javascript - mouseenter + mouseleave/将鼠标悬停在两个不同的div上

大家好，我得到了这段代码来处理mouseenter并留在2个叠加的div上

当用户鼠标进入主div时，将显示sub div，并且如果用户进入subdiv，则必须保留该subdiv，但是如果用户离开maindiv而不在subdiv中，则必须隐藏该subdiv，请尝试使用我的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/

谢谢！

最佳答案

我建议您创建一个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。