jquery - 悬停时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 hover 更改为<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");
    });
)};