悬停效果保持 div 打开

Keep div open on hover effect

我正在考虑使用以下内容:

http://jsfiddle.net/webdevem/4RgTS/

但我需要一种方法来确保当您将鼠标悬停在出现的 div 上时 div 保持打开状态。

代码如下:

$(document).ready(function() {
    $("#toggleSwitch_j").hover(

    function() {
        $("#theBox_3").slideDown(500);
    }, function() {
        $("#theBox_3").slideUp(500);
    });


    $("#StayOpen").hover(
        function() {
            $("#theBox_2").slideDown(500);
        }, function() {
            $("#theBox_2").slideUp(500);
        });
    });


<a href="#" id="toggleSwitch_j">jQuery Hover</a><div id="theBox_3">Peek-a-boo!</div>

#theBox_3, #theBox_2{
    display: none; 
    border: 1px solid #000;
    width: 200px;
    height: 100px;
    background-color: #ddf;
    position: absolute;
}
#toggleSwitch_j, #StayOpen {
 background-color: #cacaca;            
}

为此,您需要评论 slideUp

例如,

$(document).ready(function() {
    $("#toggleSwitch_j").hover(

    function() {
        $("#theBox_3").slideDown(500);
    }, function() {
        //$("#theBox_3").slideUp(500);
    });


    $("#StayOpen").hover(
    function() {
        $("#theBox_2").slideDown(500);
    }, function() {
        //$("#theBox_2").slideUp(500);
    });
});

LIVE DEMO

通过这样做,可以确保当您将鼠标悬停在您提到的 div 上时 div 保持打开状态。

希望对您有所帮助。

尝试类似的东西

$(document).ready(function() {
    $("#toggleSwitch_j").mouseover(

    function() {
        $("#theBox_3").slideDown(500);
    });
   $("#theBox_3").mouseleave(function(e) {
         console.log($(e.target));
        $("#theBox_3").slideUp(500);
    });

});

http://jsfiddle.net/gt06ajna/2/

试试下面的代码。

$(document).ready(function() {
var divBox = $("#theBox_3");
  $("#toggleSwitch_j").hover( function() {
    divBox.slideDown(500);
  });
  divBox.mouseout(function() {
    $(this).slideUp(500);
  });

});

我会说不需要评论它应该被删除,如果没有用,你的功能应该是这个

$("#toggleSwitch_j").hover(

function() {
    $("#theBox_3").slideDown(500);
});


$("#StayOpen").hover(
    function() {
        $("#theBox_2").slideDown(500);
    });
});

这里是 demo on Fiddle 带有文字输入的试写和 CSS 修改 CSS 动画(过渡)。

jQuery

// Function fires when hover on the link
$(document).ready(function ($) {
    $(document).on('hover', '.hover-me', function (e) {
        e.preventDefault();
        $(this).closest("div").find(".pop-on-hover").removeClass("closed").addClass("opened");

    });

    // Function fires when click anywhere outside the slided div
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".pop-on-hover").hasClass("pop-on-hover opened");
        if (_opened == true && !clickover.hasClass("hover-me") && !clickover.hasClass("pop-on-hover") && clickover.parents('.pop-on-hover').length == 0) {
            event.preventDefault();
            CloseHovered();
        }
    });
    // Close hovered panel function
    function CloseHovered() {
        $(".pop-on-hover").removeClass("opened").addClass("closed");
    }
});

CSS

  body {
     background-color: #eef;     
  }
  .pop-on-hover {
      border: 1px solid #000;
      width: 200px;
      background-color: #ddf;
      height:0px; 
      overflow:hidden;
      -webkit-transition: all .25s ease-out;
      -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
      transition: all .25s ease-out;
  }
  #toggleSwitch_j, #StayOpen {
   background-color: #cacaca;

  }
  .pop-on-hover.closed {
     height:0px; 

  }
  .pop-on-hover.opened {
     height:80px; 
      -webkit-transition: all .25s ease-out;
      -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
      transition: all .25s ease-out;
  }

更新

如果您需要打开此部分,您可以不使用或以其他方式使用它。

   if (_opened == true && !clickover.hasClass("hover-me") && !clickover.hasClass("pop-on-hover") && clickover.parents('.pop-on-hover').length == 0) {
     event.preventDefault();
     CloseHovered();
   }