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

【问题标题】：hover fade out transition with mouse still on it悬停淡出过渡，鼠标仍在其上
【发布时间】：2015-09-27 18:22:46
【问题描述】：

我不知道如何在没有鼠标离开 div 的情况下对 div 进行淡入/淡出效果。

我会尽量解释清楚：

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

【问题讨论】：

所以你只希望它在鼠标在它上面时淡入？
我希望它在一段时间（0.5-1s）后淡出，而鼠标不离开。我可以使用 css 过渡来完成淡入部分，但我希望悬停在一段时间后淡出，即使鼠标仍在其上。
嗯，好的。您正在 jquery 中寻找 delay。将发布答案。

标签： javascript jquery css hover

【解决方案1】：

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

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

如果你想在鼠标上显示，你可以这样做：

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

这可能不是你想要的，但我相信你可以从那里弄清楚。

【讨论】：

@FlavioMancuso 是你想要的吗？
我正在努力解决
请做一个sn-p，不知道怎么实现。
你能提供你的html吗？
别担心 Manu，看来@Praveen Kumar 解决了我的问题，谢谢！

【解决方案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>

【讨论】：

但这不是他想要的，如果鼠标停留在div上就不会淡出。
这不是我需要的，对不起！
这也不会淡出...而是纯CSS解决方案。
我不需要它循环闪烁。
它们是 CSS 而不是 jQuery，请看 /* gestione dell'hover dei riquadri */