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” 关键字库存小部件鼠标悬停并保持专注，直到我离开 keyword-inventory-widget 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;
}

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

4 个答案: