在悬停时显示Div

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(function() , 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

您需要使用mouseover而不是hover ，它会捕获鼠标在链接上移动的事件，但不会在鼠标移离链接时绑定到该事件。

Answer 2

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

    $(".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.