Jquery hover show div and stay

Question

이미지 위로 마우스를 가져 가면 div가 표시되는 작은 jquery 스크립트가 작성됩니다 (제품의 기술 사양 표시). 내 문제는 마우스를 가져 가면 새 div가로드 된 다음 마우스가 더 이상 이미지를 가리 키지 않지만 새 div가 표시되기 때문에 사라지는 것입니다. 어떤 아이디어로 이것을 풀 수 있습니까?

$(document).ready(function(){ 
    $('.hover').hover(function(){ 
     $('.techinfo').fadeIn(500) 
    },function(){ 
     $('.techinfo').fadeOut(500) 
    }) 
}) 

Answer 1

나는 용기에 모든 것을 감싸고 대신 컨테이너에 가져가 이벤트를 첨부 같은 것이다 :

<div class="main-container"> 
    <img class="hover" src="http://charlescorrea.com.br/blog/wp-content/uploads/2012/02/google-small.png" /> 
    <div class="techinfo">Here's the text</div> 
</div> 

을 ... 당신의 자바 스크립트 :

$(document).ready(function(){ 
    $('.main-container').hover(function(){ 
     $('.techinfo').fadeIn(500) 
    },function(){ 
     $('.techinfo').fadeOut(500) 
    }) 
}); 

이 방법을, 때를 컨테이너에 들어가거나 나가면 기능을 사용할 수 있습니다. Here's a fiddle.

Answer 2

http://jsfiddle.net/uWRLr/

두 번째() 함수를 제거 그래서 더 종료 호버 기능이 없습니다. 이미지를 유혹 중지 할 때마다

$(document).ready(function(){ 
    $('.hover').hover(function(){ 
     $('.techinfo').fadeIn(500) 
    }) 
}) 

두 번째 기능은 그래서 발생 및 사업부가 표시 유지됩니다 것을 중지 제거, 실행됩니다.

EDIT : Chris Kempen의 질문에 대한 답변이 완전히 읽히지 않았습니다. 질문에 대한 답변이 더 많습니다.

Answer 3

내가하고 싶은 것은 이미지와 기술 정보를 같은 div에 넣고 외부 div에도 놓습니다.

http://jsfiddle.net/uWRLr/6/

<div class="hover"> 
    <img src="http://charlescorrea.com.br/blog/wp-content/uploads/2012/02/google-small.png" /> 
    <div class="techinfo">Here's the text</div> 
</div>