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

把#content在#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> 

这样，你仍然徘徊在#hover而在#content - 我改变了ID悬停到<li>因为我也不太清楚，如果你可以拥有所有其他<span> ，<h2>，并<div>在<a>标签

Answer 2

什么你也可以做的就是添加类到您的内容项

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