jQuery가 호버에서 div 가시성을 전환합니다.

Question

그래, 이전 툴팁 기능에 약간의 변형이 있습니다. 비슷한 것을 달성하고 싶습니다. 그러나 마우스를 툴팁 div에 추적하고 포함 된 컨텐츠의 링크를 클릭 할 수 있도록하십시오. 아마 가장 좋은 설명이 아니므로, 제가 의미하는 바를 알려 드리겠습니다. http://www.hsbc.co.uk을 보시고 특히 회색 그라데이션 바를 위로 올려보십시오. '매일 뱅킹'섹션을 마우스로 이동하면 아래에 나타나는 진한 회색 상자를 추적 할 수 있습니다. 이 일을 어떻게 성취 할 수 있습니까?

<ul> 
    <li> 
    <a href="#" id="hover"> 
     <h2>Garage Search</h2> 
     <span>Find yourself a garage</span> 
    </a> 
    </li> 
</ul> 

<div id="content"> 
    Content of popup div goes here 
</div> 

$(document).ready(function() { 
    $("#hover").hover(function() { 
    $("#content").show();   
    }, function() { 
    $("#content").hide(); 
    });   
}); 

은 분명히 그것의 현재 상태에 툴팁 형태의 스크립트로 잘 작동하지만이 onmouseout 이벤트를 트리거로 아래로 팝업 위에 마우스에 저를 허용하지 않습니다이 지금까지 내 코드입니다.

Answer 1

이 #hover

<ul> 
    <li id="hover"> 
    <a href="#"> 
     <h2>Garage Search</h2> 
     <span>Find yourself a garage</span> 
     <div id="content"> 
     Content of popup div goes here 
     </div> 
    </a> 
    </li> 
</ul> 

여전히 #content에 #hover 동안 유혹하는 그런 식으로 #content을 넣어 - 당신이 모든 다른 <span>을 가질 수 있다면 내가 너무 확실하지 않다 때문에 <li>에 ID 호버 변경 <a> 태그, <h2> 및 <div>는

Answer 2

당신도 할 수있는 것은 당신 컨텐트 아이템에 클래스를 추가입니다

$(document).ready(function(){ 
    $("#hover").hover(function(){ 
     $(this).addClass("current").fadeIn(); 
    }, function() { 
     $(this).removeClass("current").stop(true, true).css("display", "none"); 
    }); 
)};