试图在鼠标输入和鼠标离开时隐藏和显示一个 div

Question

我试图在 mouseenter 和 mouseleave 时隐藏和显示一个 div。我是这样尝试的

jQuery

$("#container-advanced-option").stop().fadeToggle(100, "linear", function () {
    $("#keyword-inventory-widget").on("mouseenter mouseleave #container-advanced-option", function (e) {
        if ($(e.target).parents('#keyword-inventory-widget').length === 0) {
            $('#container-advanced-option').fadeToggle(100);
            $("#keyword-inventory-widget").off("#container-advanced-option");
        }
    });
});

HTML

<div id="keyword-inventory-widget" class="black-layer clearfix">
     <h3>SEARCH </h3>

    <input id="iks-input-keyword-main" class="form-control t-margin-5 pull-left" placeholder="Search for Vehicle (eg blue 2015 Tahoe)" style="width: 80%" />
    <button id="iks-search-default" class="btn btn-green t-margin-5 pull-right" style="width: 19%">SEARCH</button>
    <div id="container-advanced-option" class="container">
        <div class="row">
            <h5 class="b-margin">Advance Search Options</h5>
            <select id="iks-miles" class="form-control">
                <option value="30">30 Miles</option>
                <option value="50">50 Miles</option>
            </select>
        </div>
        <button id="iks-search-advanced" class="btn btn-green t-margin-5 pull-left">SEARCH</button>
    </div>
</div>

这是我总结的代码样子

更新 **

我的要求是显示“container-advanced-option” 关键字库存小部件鼠标悬停并保持专注，直到我离开 关键字库存小部件 div。

**

http://jsfiddle.net/9eSKg/

Answer 1

你在找这个吗？

Demo Link

JS 代码

 $("#hoverDiv").mouseenter(function(){
    $("#hiddenDiv").slideDown();
}).mouseleave(function(){
    $("#hiddenDiv").slideUp();
});

HTML

<div id="hoverDiv">hover on me</div>
<div id="hiddenDiv">show/hide div</div>

CSS

#hiddenDiv{display:none;}

Answer 2

为什么不使用 CSS？使用.your_div:hover{visibility:hidden;}

Answer 3

我通常会得到这样的结果......

$(function() 
  {
      $('#container-advanced-option').hide();

      $('#keyword-inventory-widget').hover(function() {
          $('#container-advanced-option')
          .stop()
          .animate(
              {
                  height: 'toggle'
              },
              {
                  duration: 100,
                  easing: 'linear' // Use easing plugin for more effects
              }
          );
      });
  }
 );

我并不是说这是在悬停事件上添加效果的唯一方法，但它可以很好地与您的代码一起使用（在您的小提琴中尝试一下）.. 希望它有所帮助。

Answer 4

我已经更新了你的小提琴...移动结束 div 标记以使其包含切换的内容会有所帮助。

http://jsfiddle.net/49GkJ/5/

html

<div id="hoverDiv">hover on me
  <div id="hiddenDiv">
    <select id="iks-miles" class="form-control">
        <option value="30">30 Miles</option>
        <option value="50">50 Miles</option>
    </select>
  </div>
</div>

jquery

$("#hoverDiv").hover(function () {
  $("#hiddenDiv").slideToggle();
});

css

#hiddenDiv {
    display:none;
}