如何解决鼠标输入和鼠标从菜单中的不透明度问题

How to solve opacity issue on mouseenter and mouselieave from a menu?

本文关键字：鼠标 菜单 问题 不透明度 输入 何解决 解决      更新时间：2023-09-26

我在页面顶部有一个菜单，我需要在背景上覆盖一个黑色和opacity = 0.7，这个"叠加层"必须出现在li:hover（mouseenter）并在mouseleave消失。这是我到目前为止所做的jsfiddle，这是全屏结果

我得到了什么：

  1. mousenter运作良好。
  2. mouseleave问题，每次鼠标离开时，叠加层都会出现和消失（似乎是一个派对闪烁的div），我知道这是逻辑，但我该怎么办？

如果我在代码中注释某些行，我会看到我想要的内容，但覆盖层仍然可见。

function iniciarmenu() {
    $(".menu-links ul li").hover(
    function () {
        $(".overlay").animate({
            opacity: 0.7
        }, 'fast');
    },
    function () {
        /*$(".overlay").animate({
            opacity: 0
        }, 'fast');*/
    });
}

我希望你能帮助我。谢谢！

您需要先停止当前动画。

 $(".overlay").stop( true, true ).animate( { … } );

请参阅：http://api.jquery.com/stop/

你也可以使用 CSS 来实现这种效果：

.overlay:hover {
    opacity: .7;
    -webkit-transition: opacity .2s;
       -moz-transition: opacity .2s;
         -o-transition: opacity .2s;
            transition: opacity .2s;
}
相关文章：