Question

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

我的代码工作得非常好但是当鼠标悬停在菜单上时，菜单的突出显示会增加，当您从菜单中悬停时它不会消失。

<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');
      });

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

Answer 1

你必须在jQuery中为hover函数提供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');
    });
});

Answer 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');
 }

Jquery，ASP.NET。同时将鼠标悬停在下拉面板和菜单按钮中

2 个答案: