Question

HTML

<ul id="menüü">  
            <li id="meist">  
                <p><a href="meist.html">Meist</a></p>  
            </li> </ul>


<div id="submenu">
    <ul id="submeist">
        <li class="asi1">
            Asi 1
        </li>
        <li class="asi2">
            Asi 2
        </li>
        <li class="asi3">
            Asi 3
        </li>
    </ul>
</div>

CSS

#meist {  
        display: inline;
        float:left;
        width:180px;  
        height:50px;  
        color:#191919;  
        text-align:center;  
        overflow:hidden; 
        background:#990000;
        -moz-border-radius-top-left: 50px;
        border-top-left-radius: 50px;

    } 

#submeist
    {   
        font-size:12px;
        display:none;
    }

    #submeist .asi1
    {
        margin-left:70px;
    }

        #submeist .asi2
    {
        margin-left:25px;
    }

    #submeist .asi3
    {
        margin-left:25px;
    }

JS

$("#meist").mouseout(function () { 
    $("#submeist").hide();
    return false; 
});

$("#meist").mouseenter(function () { 
    $("#submeist").show();
    return false; 
});

我再来这里学习并了解当鼠标悬停“meist”时如何显示“submeist”。我已经学习了一些非常基本的jQuery，但不知怎的，这段代码不起作用。非常感谢帮助，如果可能的话，还有很多评论：）

Answer 1

代码似乎没问题，您需要放入document.ready以确保dom元素可用于脚本。我使用了mouseleave代替mouseout，如果您转到p或a，则会因为鼠标输出触发事件而完成闪烁。

<强> Live Demo

$(document).ready(function(){    
 $("#meist").mouseleave(function () { 
    $("#submeist").hide();
       return false; 
    });

   $("#meist").mouseenter(function () { 
      $("#submeist").show();
      return false; 
   });
});

传递给.ready（）的处理程序保证在执行之后执行 DOM准备好了，所以这通常是附加所有其他内容的最佳位置事件处理程序并运行其他jQuery代码。使用依赖的脚本时关于CSS样式属性的值，重要的是引用外部样式表或嵌入样式元素之前引用脚本，Reference

Answer 2

您应该使用mouseleave代替mouseOut，因为即使您将鼠标悬停在a内的p或#meist上，也会触发mouseOut。< / p>

$(function(){
    $("#meist").mouseleave(function () { 
        $("#submeist").hide();
        return false; 
    });

    $("#meist").mouseenter(function () { 
        $("#submeist").show();
        return false; 
    });
});

Demo

来自Doc

mouseleave事件与mouseout处理事件冒泡的方式不同。如果在此示例中使用了mouseout，那么当鼠标指针移出Inner元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave事件仅在鼠标离开它所绑定的元素时触发其处理程序，而不是后代。因此，在此示例中，处理程序在鼠标离开外部元素时触发，而不是内部元素。

事件对是：

mouseover-mouseout

mousenter-mouseleave（悬停）

Answer 3

将mouseenter更改为mouseover，因此当您悬停链接时，它不会隐藏该元素。

除非使用jQuery委托，否则不能将事件绑定到不存在的元素上。

$(document).on("mouseover", "#meist", function(e) {
    // code
});

或者您可以等到DOM加载然后绑定事件。有一个名为.ready

的jQuery函数

$(document).ready(function() { /* code */ });
$(function() { /* code */ }); // this is an alias

如果您将<script>放在页面的末尾，它也会有用。

jQuery hide show id

3 个答案: