jQuery MouseOver에 상자 표시, MouseOver 상자에 마우스를 놓을 때 숨기기

Question

나는 stackoverflow 보관함을 조사했지만 해결책을 찾을 수 없습니다.

문제는 마우스가 위에있을 때 버튼이 있는데 그 아래에 상자가있는 것입니다. 이제 마우스가 버튼에서 벗어나면 상자는 숨겨야하지만 까다로운 부분은 여기에옵니다. 마우스가 버튼을 벗어나지 만 상자에 남아 있으면 상자가 숨겨져서는 안됩니다.

mouseover 및 mouseout 기능을 사용하고 있지만 마우스를 상자 밖으로 옮기더라도 상자 위에 마우스를 올려 놓더라도 상자가 숨겨집니다.

(function($) { 
     $(function() { 
      var dropDown = $('.box'), 
      timer, 
      cartButton = $('.button'); 

      cartButton.hover(function(){ 
       dropDown.slideToggle(); 
      }); 

     }); 
    })(jQuery); 

Answer 1

가장 좋은 방법은 포함 된 요소에 상자와 버튼을 모두 래핑하고 대신 마우스 오버 이벤트를 바인딩하는 것입니다.

HTML :

<div class="container"> 
    <input type="button" value="Hover here"> 

    <div class="box"> 
     Box content 
    </div> 
</div>​ 

jQuery를 : Here 여기에 간단한 예제 코드 인 이벤트가 포함 된 요소에 결합되어 있기 때문에

$(document).ready(function() { 
    $('.container').hover(function() { 
     $(this).children('.box').show();   
    }, function() { 
     $(this).children('.box').hide(); 
    });   
});​ 

, 마우스는하지 않습니다 단추에서 상자로 이동하면 그대로 두십시오.

컨테이너는 블록 요소이므로 너비가 100 %이므로, 고정 값으로 display: inline 또는 display: inline-block을 지정해야합니다.