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> {1}}，<h2>和<div> <a>代码中的{{1}}

Answer 2

您还可以做的是为您的内容项添加课程

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

jQuery在悬停时切换div可见性

2 个答案: