Show Div on Hover

Question

I have the following javascript (with jQuery)

$(function() {

  $(".btnDesc").click(function() {
    $("#desc").slideToggle("slow");
    $(this).toggleClass("active");
  });

When I change .click(function() to .hover(funtion(), as expected, hovering over the link with class="btnDesc" shows the div instead of clicking it, however, I would like to make it show when you stop hovering over the link, the div stays until you click a hide button. With it how I have it, once you stop hovering over the link, the div slides back up.

Answer 1

You need to use mouseover instead of hover, which captures the event of the mouse moving over the link but doesn't bind to when the mouse moves off of the link.

Answer 2

The hover function in jquery requires two functions within it - the mouseover and mouseout functions... e.g.

    $(".btnDesc").hover(
        function() {
            // code to run when mouse hovers in
            $("#desc").show("slow");
            $(this).toggleClass("active");
        },
        function() {
            // code to run when mouse hovers out
            $("#desc").hide("slow");
            $(this).toggleClass("active");
        }
    );

That will show your desc element when you hover over, and hide it when you hover out. The jquery documentation on this function is pretty good too if you get stuck.