Question

我无法弄清楚如何在div上制作淡入/淡出效果，而鼠标不会离开div。

我会尝试更好地解释它：

鼠标进入对象
对象淡入
延迟一段时间后，对象会淡出，鼠标不会离开该区域。

Answer 1

例如，您可以在jquery中执行此操作：

$('#id').fadeIn(1200).delay(1000).fadeOut(400);

如果您想在鼠标上执行此操作，则可以执行此操作：

 $('#id').hover(function() {
          $('#id').fadeIn(1200).delay(1000).fadeOut(400);
        });

这可能不是你想要的，但我相信你可以从中找到它。

Answer 2

您可以使用mouseover事件：

$(element).parent().mouseover(function() {
  $(element).fadeIn(1200).delay(1000).fadeOut(400);
});

您将鼠标悬停在该元素上，它会淡入。
它等了一秒钟。
即使你在元素上，它也会淡出。

<强>段

$(function () {
  $(".child").css("opacity", 0);
  $(".child").mouseover(function () {
    $(this).animate({
      opacity: 1
    }, 1000).delay(1000).animate({
      opacity: 0
    }, 1000);
  });
});

.parent {position: relative; background: #99f; height: 250px;}
.parent .child {position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; background: #ccf;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
  <p>Stand on me?</p>
  <div class="child"></div>
</div>

将鼠标悬停在其上时悬停淡出过渡

2 个答案: