3

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，但不知何故这段代码不起作用。非常感谢帮助，如果可能的话，比很多评论：）

4

3 回答 3

4

您应该使用mouseleave而不是，mouseOut因为即使您将鼠标悬停在aor pwhich is inside上也会触发 mouseOut #meist。

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

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

演示

来自文档

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

事件对是：

mouseover-mouseout

mousenter-mouseleave（徘徊）

于 2013-06-03T16:36:43.777 回答
4

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

现场演示

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

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

传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序和运行其他 jQuery 代码的最佳位置。当使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素很重要，参考

于 2013-06-03T16:33:06.453 回答
1

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

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

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

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

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

如果您将<script>其放在页面末尾，它也将起作用。

于 2013-06-03T16:36:51.477 回答