悬停淡出过渡，鼠标仍在其上

Question

我不知道如何在鼠标不离开 div 的情况下对 div 产生 fade-in/fade-out 效果。

我会尝试更好地解释它：

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

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>

悬停淡出过渡，鼠标仍在其上

hover fade out transition with mouse still on it

javascript

css

jquery

hover