好的,所以我对旧的工具提示功能有一些变化。我想要实现类似的功能,但是要使鼠标可以跟踪工具提示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事件时鼠标按下弹出窗口。
答案 0 :(得分: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}}
答案 1 :(得分:0)
您还可以做的是为您的内容项添加课程
$(document).ready(function(){
$("#hover").hover(function(){
$(this).addClass("current").fadeIn();
}, function() {
$(this).removeClass("current").stop(true, true).css("display", "none");
});
)};