jQuery Hovermenu

Question

I have a div("dv1") with AJAX update panel inside which contains multiple dropdown controls. These controls do a postback when the index is changed. Then I use a jQuery hover function like the one below:

$('#lblDate').hover($('#dv1').slideDown(),$('#dv1').slideUp());

This works fine when I hover on the label, but whenever I try to select something on any dropdown, the div slides up. Anyone knows a workaround on this?

Thanks

Answer 1

You need to pass functions to hover instead of invoking them, like this:

$('#lblDate').hover(
    function() { $('#dv1').slideDown(); },
    function() { $('#dv1').slideUp(); }
);

Also, you need to use ASP.Net's ClientIDs for your controls, like this:

$('#<%= lblDate.ClientID %>')...

---

To answer your question, you probably want to wrap the label and the dropdown in a <div> and hover on that.