悬停效果时保持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();
   }

Answer 2

为此，您需要评论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。

希望这有帮助。

Answer 3

尝试类似的东西

$(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/

Answer 4

尝试使用以下代码。

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

});

Answer 5

我想说没有必要发表评论如果没有用就应该删除，你的功能应该是这个

$("#toggleSwitch_j").hover(

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


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