gpt4 book ai didi

jQuery 自定义工具提示(不是 ui)仅在 IE7 中不起作用

转载 作者:行者123 更新时间:2023-12-01 04:18:27 24 4
gpt4 key购买 nike

我有一个自定义工具提示功能(在 jQuery 中),它在所有[主要]浏览器(甚至在 IE8 中)都运行良好除了IE7

网站的文档类型是较新的 html 5 文档类型 ( <!DOCTYPE html> )。

有 5 个链接/图像。 IE7 正确显示第一个工具提示(减去一些小的布局问题 - 但可以修复),但在其他链接(图像)上,它会恢复到其余链接的原始浏览器工具提示。

$('#port-window a').hover(function() {
var tip = $(this).attr('title');
$(this).attr('title','');
$(this).append("<div id='tooltip'>"+ tip +"</div>");
$("#tooltip")
.css("position","relative")
.css("z-index","999")
.fadeIn("slow");
}, function() {
$(this).attr('title',$('#tooltip').html());
$(this).children('div#tooltip').remove();
});

标题的 HTML 是这样的:

<ul class="portfolio">
<li>
<div id="port-window">
<a title="This is the title" href="[blogurl]/work/web-design-dev/website/">
<span class="window"></span>
<span class="gradient"></span>
<img src="[blogurl]/portfolio-images/thumbs/image.jpg" alt="alt tag info" title="img title attr - not used" />
</a>
</div>
</li>
</ul>

任何人都可以阐明如何解决此问题吗?

最佳答案

在 IE7 中检查此 http://jsfiddle.net/Xg7ru/1/

你犯的错误并不难发现,你在一个页面中使用了 id #port-window 3 次,这对于 CSS 来说通常不是问题,但是 jQuery 会使用给定的值返回 DOM 中的第一个元素ID 因此它适用于第一张图片。我真的不确定它在其他浏览器中是如何工作的。

我将 HTML 标记从 id='port-window' 更改为 class='port-window' 并相应地更改了 JS、CSS 中的选择器,现在它在 IE7 中对我来说似乎工作正常。

编辑:根据规范,给定 ID 只能有一个 DOM 节点

关于jQuery 自定义工具提示(不是 ui)仅在 IE7 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12696541/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com