mouseenter 및 mouse leave에서 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"을 표시합니다. keyword-inventory-widget div를 남길 때까지 keyword-inventory-widget을 마우스 오버하고 계속 집중합니다.

**

http://jsfiddle.net/9eSKg/

Answer 1

왜 CSS를 사용합니까? 사용 .your_div:hover{visibility:hidden;}

Answer 2

찾고 계십니까?

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

나는 보통이 같은 끝낼

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를

당신이 가져가하고 싶은 당신이 보여주고 싶은 /가