Question

我有一个<ul>样式作为菜单（下面的标记和CSS）

    <ul id="TopNavigation">
        <li><a href="#" id="products" class="products">PRODUCTS</a></li>
        <li><a href="#" class="treatments">TREATMENTS</a></li>
        <li><a href="#" id="clinics" class="clinics">CLINICS</a></li>
        <li><a href="#" class="onlinereservation">ONLINE RESERVATION</a></li>
        <li><a href="#" class="contactus">CONTACT US</a></li>
    </ul>

#TopNavigation { position:relative; float:left; display:block; width:902px; height:48px; padding:0; list-style-type:none; margin:0; background:url(../images/topnav/tile-secbar.png) repeat-x; color:#999; font:normal 13px "Helvetica", sans-serif, Arial; }
#TopNavigation li { float:left; height:18px; margin-top:2px; padding:0; color:#999; font:normal 13px "Helvetica", sans-serif, Arial; display:block; }

我正在使用.hover() jQuery在各自的<div>（#products＆amp; #clinics）中为两个<a>对象显示/隐藏<li>。我的问题是，如果我将鼠标水平移动到具有handlerOut(eventObject)功能的两个<a>中的任何一个，.hover()都不会触发。（代码打击，其他<a>的代码是相同的，但.removeClass等代码用于#clinics）

$("#products").hover(function(){
            $("#HoverContainer").show(500, function(){
                $("#products").removeClass("products").addClass("products_active");
            });
        }, function(){
            $("#HoverContainer").mouseleave(function(){
                $("#HoverContainer").hide(500, function(){
                    $("#products").removeClass("products_active").addClass("products");
                });
            });
        });

我应该更改我的脚本代码还是应该更改CSS和/或HTML？

Answer 1

您只隐藏#HoverContainer mouseleave #HoverContainer，而不是mouseLeave #products。因此，如果您的鼠标永远不会进入#HoverContainer，它将永远不会隐藏。

我要做的是在li上定义悬停，然后悬停时将#HoverContainer插入li（这样它就是悬停的一部分）。然后离开li，在mouseleave的{{1}}上执行您现有的操作。

handlerOut在菜单样式<ul> </ul>中未触发

1 个答案: