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>

Javascript 导航菜单闪烁

1 个答案: