Question

你好我已经得到了这段代码来处理mouseenter并留下2个叠加的div

当用户鼠标输入主div时，显示子div，如果用户进入子单元，则必须保留子单元，但如果用户离开maindiv并且不在子单元中，则必须隐藏子单元，尝试与我的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

我猜你想让div向后移动并在鼠标离开sub 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;">

Answer 2

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

mouseenter + mouseleave /悬停在两个不同的div上

2 个答案: