试图隐藏并显示鼠标和鼠标离开的div

Question

我试图隐藏和显示当鼠标和鼠标保存。我试着像这样

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>

这是我对代码的总结

更新 **

我的要求是显示“容器-高级-选项”的关键字-库存-小部件鼠标上方，并保持集中，直到我离开关键字库存-小部件div。

**

http://jsfiddle.net/9eSKg/

Answer 1

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

Answer 2

我通常会有这样的结果..。

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

我更新了你的小提琴。移动关闭的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;
}