javascript - 尝试在 mouseenter 和 mouse left 上隐藏和显示 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>

这是我的代码摘要，如下所示

已更新 **

my requirement is show "container-advanced-option" on keyword-inventory-widget mouse over and stay focused until i leave the 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;}