Question

我有一个按钮和一个菜单。鼠标悬停按钮显示菜单。当鼠标离开菜单隐藏自己时，我编码了，但它在鼠标移过它之前隐藏了。帮助

＆＃13;

function showMenu() {
  var menuBar = document.getElementById("menu");

  menuBar.style.display = "block";

}

function hideMenu() {
  document.getElementById("menu").style.display = "none";
}

＆＃13;

<a id="menu_button" onmouseover="showMenu()"><img src="https://i.imgur.com/mRIyhW8.png" class="menu_button" onmouseover="this.src='https://i.imgur.com/zSPpoVX.png'" onmouseout="this.src='https://i.imgur.com/mRIyhW8.png'" /></a>

<div id="menu" onmouseout="hideMenu()">
  <ul>
    <li>HOME</li>
    <li>PORTFOLIO</li>
    <li>ABOUT</li>
  </ul>
</div>

＆＃13;

修改添加z-index：2;在我的CSS中解决了这个问题。谢谢你的时间。

Answer 1

将鼠标悬停在UL元素上时会触发

onmouseout事件。用纯javascript解决这个问题很复杂。 Jquery有mouseenter和mouseleave方法。

function findFirstNum($myString) {

    $slength = strlen($myString);

    for ($index = 0;  $index < $slength; $index++)
    {
        $char = substr($myString, $index, 1);

        if (is_numeric($char))
        {
            return $index;
        }
    }

    return 0;  //no numbers found
}

Answer 2

您需要使用mouseleave，因为：

鼠标指针离开任何子节点时会触发mouseout事件元素以及所选元素。

更新：

更改了menu_button的大小以避免触发外部图像。
为#menu添加了css，现在开始隐藏。
添加mouseleave到menu_button以便在离开时隐藏图像。

＆＃13;

document.getElementById("menu_button").addEventListener('mouseover', function() {
  document.getElementById("menu").style.display = "block";
});

document.getElementById("menu").addEventListener('mouseover', function() {
  document.getElementById("menu").style.display = "block";
});

document.getElementById("menu").addEventListener('mouseleave', function() {
  document.getElementById("menu").style.display = "none";
});

document.getElementById("menu_button").addEventListener('mouseleave', function() {
  document.getElementById("menu").style.display = "none";
});

＆＃13;

#menu_button {
  display: block;
  width: 50px;
  height: 50px;
}

#menu_button img:hover {
  opacity: 0.8;
}

#menu {
  border: solid 1px;
  display: none;
 }

＆＃13;

<a id="menu_button"><img src="https://i.imgur.com/mRIyhW8.png" class="menu_button" /></a>

<div id="menu">
  <ul>
    <li>HOME</li>
    <li>PORTFOLIO</li>
    <li>ABOUT</li>
  </ul>
</div>

＆＃13;

菜单应该隐藏在onmouseout上，但它隐藏在onmouseover上

2 个答案: