0

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

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

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

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

4

2 回答 2

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');
    });
});
于 2013-08-08T19:24:03.730 回答
0

菜单：

            <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');
 }
于 2013-08-08T20:17:50.220 回答