Jquery, ASP.NET. Hovering a dropdown panel and menu button at same time in

Question

Ive got a menu and a drop-down panel. When hovering over the menu the panel falls down. I want the menu and the drop down to be highlighted at the same time.

My code is working very nicely but when hover over the menu the highlighting for the menu adds and wont vanish when you hover out from the menu.

<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>

I believe im almost done, there is just one little thing left that i cant figure out. I have been trying to add:

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

But that wont work. Any other suggestions would help me.

Stephen · Accepted Answer · 2013-08-08 20:34:45Z

1

You have to provide 2 callback functions to the hover function in jQuery; one that is called when you move over, and one that is called when you move out.

And the final callback $(this).removeClass('menuHighlighted'); removes a class from the panel-item that was never there, so your probably meant the parent menu-item.

EDIT 2:

Add the classes on mouseenter of the menu-item, but remove them when leaving your panel.

So, something like this:

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

edited Aug 8, 2013 at 20:34

answered Aug 8, 2013 at 19:24

Stephen

2,0472 gold badges22 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dumbel Over a year ago

I thank you for you answer and suggestion, tho when trying this out my menu and panel will not be highlighted at the same time. The menu highlight drops out when moving to the panel.

Stephen Over a year ago

I revised my answer based on your comment. If this doesn't work, please provide your HTML as well

dumbel Over a year ago

This solution is the same as my starting problem. menuHighlight wont remove. I will add my HTML code.

Stephen Over a year ago

Revised the answer again: set the class when entering the menu-item with the mouse, but only remove them after leaving the panel.

dumbel Over a year ago

Yes finally its working! So basically i needed to clear the panel when mouse was leaving it. I thank you for your hard work. Could not have done this without you :).

dumbel · Accepted Answer · 2013-08-08 20:17:50Z

Menu:

            <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>

Panel:

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

Collectives™ on Stack Overflow

Jquery, ASP.NET. Hovering a dropdown panel and menu button at same time in

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related