Javascript导航菜单闪烁
Javascript导航菜单闪烁
提问于 2021-06-27 20:48:50
我有一个带有子链接的导航菜单。当我将鼠标放在有子链接的链接上时，当我将鼠标移到链接上时，它会闪烁。
对我的问题的说明：
https://i.ibb.co/g684pXt/illustr.gif
function myFunction(i) {
document.getElementById("myDropdown" + i).classList.toggle("show");
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function yourFunction(i) {
document.getElementById("myDropdown" + i).classList.toggle("show");
document.getElementById("myDropdown" + i).children.classList.remove("show");
}<li class="active"><a href="{{ route('comparateur') }}">{{__('header.Comparer')}}</a></li>
<div class="d_1">
<button href="{{ route('vpn.index') }}" onmouseover="myFunction(1)" class="d_btn">{{__('header.Meilleurs-VPN')}} <i class="fa fa-angle-down"></i></button>
<div id="myDropdown1" onmouseout="yourFunction(1)" class="d_content d_mobile_1">
<a href="{{ route('vpn.index') }}">Tous les VPN</a>
<a href="{{ route('vpn.windows') }}">Windows</a>
<a href="{{ route('vpn.ios') }}">{{__('header.Mac')}}</a>
<a href="{{ route('vpn.linux') }}">{{__('header.Linux')}}</a>
<a href="{{ route('vpn.android') }}">{{__('header.Android')}}</a>
<a href="{{ route('vpn.netflix') }}">{{__('header.Netflix')}}</a>
</div>
</div>
它可以工作，但导航不流畅，不好，因为当我在子菜单中移动鼠标时，子菜单在每个链接之间闪烁。
请帮帮忙！谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-27 21:58:42
我会抛弃javascript，转而使用纯CSS。当你点击元素时，:focus会选择它，而x + y的意思是“如果它紧跟在x后面，就选择y”。
button:focus + div {
display: flex;
}
button + div {
display: none;
flex-direction: column;
}
/* ALL DECORATION BELOW AND NOT RELEVANT TO THE ISSUE */
button + div {
padding: 0.5rem 0px;
background: pink;
}
button + div > a {
padding: 0.5rem;
}
button + div > a:hover {
background: rgba(0, 0, 0, 0.13);
}<div class="d_1">
<button href="{{ route('vpn.index') }}" class="d_btn">{{__('header.Meilleurs-VPN')}} <i class="fa fa-angle-down"></i></button>
<div id="myDropdown1" class="d_content d_mobile_1">
<a href="{{ route('vpn.index') }}">Tous les VPN</a>
<a href="{{ route('vpn.windows') }}">Windows</a>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68151319
复制相关文章
相似问题
腾讯云开发者
