FadeIn（）打破CSS懸停功能

爲什麼jQuery的.fadeIn()功能打破了我的CSS懸停功能？當你將鼠標懸停在它上面時，我的div應該顯示它的菜單。當我的頁面顯示我要讓菜單淡入時，它應該有我的常規懸停功能。FadeIn（）打破CSS懸停功能

這個JSFiddle很好地演示了這個問題。

它爲什麼會打破我的懸停功能，如何保持淡入和懸停功能？

注意我需要保持display: flex以確保菜單div不包裝，如果它的寬度比其父div。

.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; 
 
}

<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>

來源

2016-08-25 Jake M

你想要達到什麼樣的目的？菜單在淡入時可見，所以當你將鼠標懸停在文本上時，它已經顯示出你喜歡的內容了嗎？ – Roberrrt

@Roberrrt在頁面加載時菜單將淡入，以便用戶知道它在那裏。然後，第一次懸停和懸停/鼠標離開後，該菜單應該照常消失。現在不會發生這種情況 –

哦，發生這種情況是因爲jQuery爲您的元素添加了內聯樣式，否決了您的懸停 – Roberrrt

這是因爲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', ''); 
     }); 
    }); 
});

來源

2016-08-25 14:17:46 Roberrrt

你需要使用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一起工作。如果你願意，你也做了淡入後懸停工作，你需要從菜單中刪除的風格，當你下次懸停

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

來源

2016-08-25 14:18:16 Pete

僅僅是我還是不行？其結果與我的jsfiddle相同。我在Firefox上。 –

@JakeM對不起，誤解了你的問題。查看更新 – Pete

的問題是，JQuery的運行後的CSS是加載，所以JQuery接觸的任何屬性現在都會被覆蓋。不要直接應用更改來顯示菜單，而是嘗試使用JQuery來切換模擬:hover僞類的類，如.hover，並將該類添加到您的html中。然後使用JQuery刪除.hover類，一旦鼠標進入並離開該區域。通過這種方式，JQuery不會觸及您的初始CSS，並且一旦.hover類被刪除，它將按預期工作。

這裏是一個小提琴演示：https://jsfiddle.net/2dbr2bs3/。

來源

2016-08-25 14:19:43 Shnibble

FadeIn（）打破CSS懸停功能

回答

相關問題