Javascript 導航菜單閃爍

Question

我有一個帶有子鏈接的導航菜單。 當我將鼠標放在具有子鏈接的鏈接上時，將鼠標移到鏈接上時它會閃爍。

我的問題的說明：

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>

它可以工作，但導航不流暢，不好，因為當我在子菜單中移動鼠標時，子菜單在每個鏈接之間閃爍。

任何幫助，請！ 謝謝！

Answer 1

我會放棄 javascript 並使用純 CSS。 :focus當你點擊它時選擇元素， x + y表示“選擇y如果它直接跟在x ”。

 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>