Question

我正在开发一个带有移动菜单的网站，当将鼠标悬停在另一个菜单项（而不是父项）上时，其中应显示三个基本元素

我已经尝试过CSS，但是如果不更改html结构就不可能，因此我暂时将其保留。我也尝试了onclick函数，但是单击后移动菜单消失了，所以也不起作用。因此，最好使用onmouseover javascript。

到目前为止我拥有的javascript代码：

<script type='text/javascript'>
    document.getElementsByClassName("holder").onmouseover = function(){mouseOver()};
    document.getElementsByClassName("holder").onmouseout = function() {mouseOut()};
    function mouseOver() { 
    document.getElementsByClassName("helper").style.display=="block";}
    function mouseOut() {
    document.getElementsByClassName("helper").style.display=="none";}
</script>

html如下：

<ul class="mm-listview">
<li class="holder menu-item menu-item-type-custom menu-item-object-custom"><a href="#">Holder</a></li>
<li class="helpers menu-item menu-item-type-custom menu-item-object-custom menu-item-has-icon"><a href="https://example.com/">Example</a></li>
<li class="helpers menu-item menu-item-type-custom menu-item-object-custom menu-item-has-icon"><a href="https://example.com/">Example</a>
</li></ul>

Answer 1

Modified HTML below.

<ul class="mm-listview">
<li id="holder"><a href="#">Holder</a></li>
<li id="helper1"><a href="https://example.com/">Example</a></li>
<li id="helper2"><a href="https://example.com/">Example</a>
</li></ul>

Modified JS below.
<script type='text/javascript'>
    document.getElementById("holder").onmouseover = function(){mouseOver()};
    document.getElementById("holder").onmouseout = function() {mouseOut()};
    function mouseOver() { 
    document.getElementById("helper1").style.display=="block";}
    function mouseOut() {
    document.getElementById("helper").style.display=="none";}
</script>

这应该有效。

Answer 2

getElementsByClassName 将返回包含所有元素为 helper 的元素的数组。您需要更改每个元素的显示，如下所示：

nil

如何使用javascript将菜单项显示在鼠标悬停上

2 个答案: