1

嗨，我得到了这段代码来处理 mouseenter 并离开 2 个叠加的 div

当用户鼠标进入主 div 时，会显示 subdiv，如果用户进入 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 小提琴：http: //jsfiddle.net/rgkcp/

谢谢！

4

2 回答 2

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 回答
0

I am guessing that you want the div to move back out of the way and disappear when the mouse leaves the sub div. If that is the case this should work fine. If it is not we could definitely use some clarification. You were changing the visibility before the animation, so the animation would not be visible. There were a couple missing quotes in the fiddle as well.

    $(".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');});}
});

Also on the mupHome div the style was not closed out correctly, not sure if this is true in your real code or not

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

Should be

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