jquery - 在悬停效果上保持 div 打开

Question

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

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

Answer 1

这是 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();
   }