jQuery，ASP.NET。同时悬停下拉面板和菜单按钮答案

【问题标题】：Jquery, ASP.NET. Hovering a dropdown panel and menu button at same time injQuery，ASP.NET。同时悬停下拉面板和菜单按钮
【发布时间】：2013-08-08 10:06:31
【问题描述】：

我有一个菜单和一个下拉面板。将鼠标悬停在菜单上时，面板会下降。我希望同时突出显示菜单和下拉菜单。

我的代码运行良好，但是当将鼠标悬停在菜单上时，菜单的突出显示会添加，并且当您将鼠标悬停在菜单外时不会消失。

<script type="text/javascript">
 $(window).load(function () {
     $(".menu-item").hover(function () {
         $(".menu-item").removeClass('menuHighlighted');
         $(this).addClass('menuHighlighted');
     });

     $(".panel-item").hover(function () {
         $(this).addClass('listHighlighted');
         $(this).parents('.menu-item').addClass('menuHighlighted');
     },
function () {
   $(this).removeClass('listHighlighted');
   $(this).removeClass('menuHighlighted');
});
});
</script>

我相信我快完成了，只剩下一件小事我想不通。我一直在尝试添加：

      $(".menu-item").mouseleave(function () {
          $(this).removeClass('menuHighlighted');
      });

但这行不通。任何其他建议都会对我有所帮助。

【问题讨论】：

标签： jquery asp.net hover panel

【解决方案1】：

你必须为jQuery中的悬停函数提供2个回调函数；一个在你搬过来的时候调用，一个在你搬出去的时候调用。

最后的回调$(this).removeClass('menuHighlighted'); 会从面板项中删除一个从未存在过的类，因此您的意思可能是父菜单项。

编辑 2：

在菜单项的 mouseenter 上添加类，但在离开面板时将其删除。

所以，是这样的：

$(window).load(
    function () {
        $(".menu-item").mouseenter(
        function () {
            $(".menu-item").removeClass('menuHighlighted');
            $(this).addClass('menuHighlighted');
        }
    );

    $(".panel-item").hover(function () {
        $(this).addClass('listHighlighted');
    },
    function () {
        $(this).removeClass('listHighlighted');
    });

    $("#pnClub").mouseleave(function () {
        $('.menu-item').removeClass('menuHighlighted');
    });
});

【讨论】：

感谢您的回答和建议，但在尝试此操作时，我的菜单和面板不会同时突出显示。移动到面板时菜单突出显示消失。
我根据您的评论修改了我的答案。如果这不起作用，请同时提供您的 HTML
这个解决方案和我开始的问题一样。 menuHighlight 不会删除。我将添加我的 HTML 代码。
再次修改答案：鼠标进入菜单项时设置类，离开面板后才移除。
是的，终于它工作了！所以基本上我需要在鼠标离开面板时清除它。我感谢你的辛勤工作。没有你就不可能做到这一点:)。

【解决方案2】：

菜单：

            <div id="menu">   
                        <a href="Default.aspx">
                            <div class="menu-item">
                              <span class="menu-text">Home</span> 
                             </div>
                        </a>

                        <div class="menu-item" id="Club" runat="server">
                           <span class="menu-text">Club</span> 
                        </div>

                        <a href="About.aspx">
                            <div class="menu-item">
                                <span class="menu-text">About</span> 
                             </div>
                        </a>               
             </div>

面板：

 <asp:Panel CssClass="panel-club" ID="pnClub" runat="server">
    <div id="panel-club-area">       
                            <a href="Time.aspx">
                                <div class="panel-item">
                                    <span class="panel-text">Time</span> 
                             </div>
                            </a>

                            <a href="Area.aspx">
                                <div class="panel-item">
                                    <span class="panel-text">Area</span> 
                                </div>
                            </a>

                            <a href="Info.aspx">
                                <div class="panel-item">
                                    <span class="panel-text">Info</span> 
                                </div>
                            </a>

        </div>                      
 </asp:Panel>

CSS：

.menuHighlighted
 {
 background-image: url('img/menu-item.png');
 }

 .listHighlighted
 {
     background-image: url('img/bg.png');
 }

【讨论】：