2014-02-28 1 views
1

아주 간단한 문제 :jquery 호버를 수정하는 방법 show() effect는 입력 필드에서 사용하지 못하나요?

아이콘과 양식 위에 마우스를 올려 놓을 때만 나타나는 드롭 다운 메뉴 안에 폼 (로그인/비밀번호)이 있습니다. 즉, mouseleave 그리고 그것은 사라집니다. 스크립트는 다음과 같습니다.

$(document).ready(function() { 
    $('.headermenushow').hover(function() { 
    $(this).next('.dropmenu').slideDown(50); 
    }); 
    $('.navselector').mouseleave(function() { 
    $('.dropmenu').fadeOut(50); 
    }); 
}); 

직선 전달 물건. 문제는 일단 텍스트 입력 필드를 클릭하면 스크립트가이를 마우스 등록으로 등록하고 양식이 사라집니다. 나는 그것을 채우는 동안 볼 수있는 형태가 필요하다!

이 문제를 해결하는 방법에 대한 아이디어가 있으십니까?

+2

당신이 http://jsfiddle.net에 복제 할 수 있습니까? – hemanth

+1

HTML도 제공 할 수 있습니까? –

답변

1

나는 다른 클래스에서 마우스를 가져 가면 mouseleave 이벤트가 발생하는 것을 이해하지 못했습니다. 그러나 마우스 오버시 마우스 이벤트 (Refer this)와 마우스 오버 & 모두를 바인딩합니다. 따라서 다른 mouseleave 이벤트가 필요하지 않습니다.

$(<Selector>).hover(functionToHandleWhenMouseEnters, 
          functionToHandleWhenMouseLeaves); 

다음은 간단한 예입니다.

예 : (fiddle)

HTML :

<div id="nav_bar"> 
    <a id="option">Hover menu</a> 
    <ul id="dropmenu"> 
     <li>a</li> 
     <li>b</li> 
    </ul> 
</div> 

자바 스크립트 :

$(document).ready(function() { 
    $("#dropmenu").hide(); 
    $("#option").hover(
    function() { 
     $(this).next('#dropmenu').slideDown(50); 
    }, 
    function() { 
     $(this).next('#dropmenu').slideUp(50); 
     //$(this).next('#dropmenu').fadeOut(500); 
    }); 
}); 
관련 문제