HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Button">Button
<div class="FadeItem">
<ul>
<li>Main Menu A </li>
<li class="Button">Main Menu B
<div class="FadeItem">
<ul>
<li>Sub Menu B</li>
<li>Sub Menu B</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
CSS:
.button{
float: left;
}
.FadeItem{
display: none;
}
jQuery:
$(document).ready(function () {
$(".Button").hover(function(){
$(".FadeItem").fadeToggle(500);
});
});
如您所见,上面的简单代码在某些元素的内容中淡入淡出。 问题是当我将光标放在 fadein 内容上时它正在闪烁,但我希望内容显示时不闪烁。
您是否知道我需要更改我的代码以停用闪烁?
最佳答案
更新:
你不需要 js:D
.FadeItem{
display:none;
transition: all 0.5s ease;
}
.Button:hover>.FadeItem{
display:block;
transition: all 0.5s ease;
}
<div class="Button">Button
<div class="FadeItem">
<ul>
<li>Main Menu A </li>
<li class="Button">Main Menu B
<div class="FadeItem">
<ul>
<li>Sub Menu B</li>
<li>Sub Menu B</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
关于jquery - 停用 fadeToggle 的闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45530265/