Jquery FadeIn（）中断CSS悬停功能

为什么jQuery的

.fadeIn（）

函数会破坏我的CSS悬停功能？当你将鼠标悬停在我的div上时，它应该会显示它的菜单。当我的页面显示我将使菜单淡入时，它应该有我的常规悬停功能

这很好地说明了这个问题

为什么它会破坏我的悬停功能？我如何保持淡入和悬停功能

注意：我需要保留

display:flex

，以确保如果菜单div比其父div宽，则不会换行

.widget{
位置：相对位置；
宽度：300px；
高度：300px；
背景色：#ddd；
}
.小部件菜单{
宽度：400px；
高度：100px；
背景色：#555；
位置：绝对位置；
排名：0；
显示：无；
}
.widget:hover.widget菜单{
显示器：flex；
/*用于确保在菜单比小部件容器宽时不会发生包装*/
}
.widget:已启用.widget菜单{
显示：无；
}

Btn 1










将鼠标悬停以查看菜单显示。然后单击下面的按钮。现在，动画完成后，我的悬停被搞砸了



淡入

这是因为jQuery的

.fadeIn（）

方法添加了覆盖悬停的内联样式。我已更新了您的代码，并对其进行了一些解释，以完全满足您的要求：

// When document is ready...
$(document).ready(function() {
    // Fade in the menu, to show the user it's there.
    $('.widget-menu').fadeIn('slow', function() {
        // Fade out the menu, like you want
        $('.widget-menu').fadeOut('slow', function() {
            // Reset the inline style to not mess with the :hover
            $('.widget-menu').attr('style', '');
        });
    }); 
});

---

您需要使用flex激活

fadeIn

：

$('.widget-menu').css('display', 'flex').hide(); // do this on doc ready or before you call the fadeIn

$('.widget-menu').fadeIn('slow'); // fade in will now use flex instead of block

更新

抱歉，我以为您只是想让

fadeIn

与flex一起使用。如果您希望在完成fadeIn后悬停工作，则需要在下次悬停时从菜单中删除样式

var-menu=$（'.widget-menu'）；
css（'display'，'flex'）.hide（）；
$（'body>button'）。单击（函数（）{
menu.fadeIn（'slow'）；
});
$（'.widget'）。在（'mouseover'，function（）上{
$（this.find（'.widget menu'）.hide（）；
})

---

问题是JQuery在加载CSS后运行，因此JQuery涉及的任何属性现在都将被覆盖。与其应用更改直接显示菜单，不如尝试使用JQuery切换模仿

：hover

伪类的类，例如

。hover

，并将该类添加到html中。然后使用JQuery在鼠标进入然后离开该区域时删除

.hover

类。这样JQuery就不会触及初始CSS，一旦删除

.hover

类，它就会按预期工作

---

这里有一把小提琴在演示：。

你到底想要实现什么？淡入时菜单可见，因此当您将鼠标悬停在文本上时，它已经显示了您喜欢的内容，对吗？@Roberrrt on page load菜单将淡入，以便用户知道它的位置。然后在第一次悬停和悬停/鼠标离开后，该菜单应像往常一样消失。现在没有发生这种情况，因为jQuery向元素中添加了一个内联样式，否决了您的悬停，这只是我还是不起作用？这与我的JSFIDLE的结果相同。对不起，我误解了你的问题。请参阅更新