Question

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

这JSFiddle很好地证明了这个问题。

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

注意我需要保留.widget { position: relative; width: 300px; height: 300px; background-color: #ddd; } .widget-menu { width: 400px; height: 100px; background-color: #555; position: absolute; top: 0; display: none; } .widget:hover .widget-menu { display: flex; /* used to ensure wrapping doesn't occur if the menu is wider than the widget container */ } .widget:enabled .widget-menu { display: none; }以确保菜单div如果比其父div更宽，则不会换行。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
  <div class="widget-menu">
    <button>Btn 1</button>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <p>Hover me to see menu appear. Then click the below button. Now my hovering is screwed up after the animation is complete.</p>
</div>

<br/>
<button>Fade In</button>

'content' => base64_encode(config('global.UPLOAD_PATH') . '/my_file.pdf')

Answer 1

您需要使用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

Updated fiddle

<强>更新

抱歉，您认为只是希望fadeIn能够使用flex。如果您希望在完成fadeIn后悬停工作，则需要在下次悬停时从菜单中删除该样式

var menu = $('.widget-menu');
menu.css('display', 'flex').hide();
$('body > button').click(function() {
  menu.fadeIn('slow');
});

$('.widget').on('mouseover', function() {
  $(this).find('.widget-menu').hide();
})

New Fiddle

Answer 2

这是因为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', '');
        });
    }); 
});

Answer 3

问题是JQuery在加载CSS后运行，因此现在将覆盖JQuery所触及的任何属性。不要应用更改来直接显示菜单，而是尝试使用JQuery切换模仿:hover伪类（例如.hover）的类，并将该类添加到html中。然后在鼠标进入后使用JQuery删除.hover类，然后离开该区域。通过这种方式，JQuery不会触及您的初始CSS，并且在删除.hover类后它将按预期工作。

这是一个小提示：https://jsfiddle.net/2dbr2bs3/。

FadeIn（）打破了CSS悬停功能

3 个答案: