2

我有一个自定义工具提示功能（在 jQuery 中），它在除 IE7 之外的所有 [主要] 浏览器（甚至在 IE8 中）都运行良好。

该站点的文档类型是较新的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>

任何人都可以阐明如何解决这个问题吗？

4

3 回答 3

2

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

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

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

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

于 2012-10-02T19:52:46.510 回答
0

我认为问题可能出在.attr()方法上。

您可能想尝试使用该.prop()方法。

两者非常相似，但它们之间也有区别，而且实际上大部分时间.prop()都是正确的。

更重要的是，我相信旧版本的 IE 存在错误.attr()，所以有些东西可以使用.prop()，而.attr(). 这可能是其中一种情况。

我没有 IE7 可以在你的代码上试用它，所以你必须尝试它并让我知道它是否有效。

参考：

希望有帮助。

于 2012-10-02T19:37:06.427 回答
0

主要问题是您有多个id="port-window"对象。你不能这样做 - 每个 id 一个对象。将它们更改为一个类。我会推荐这个在 IE7 中工作的代码（并将 CSS 更改为使用.port-window而不是#port-window）：

<ul class="portfolio">
    <li>
        <div class="port-window">
            <a data-title="TITLE 1" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
    <li>
        <div class="port-window">
            <a data-title="TITLE 2" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
    <li>
        <div class="port-window">
            <a data-title="TITLE 3" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
</ul>​

工具提示存储在数据项中（因此您不必清除它），它只是跟踪新的 div 而不必再次找到它：

$('.port-window a').hover(function() {
    $("<div id='tooltip' style='display: none; position: relative; z-index: 999;' >" +
            $(this).data('title') + "</div>")
        .insertAfter(this)
        .fadeIn("slow");
}, function() {
    $('#tooltip').remove();
});

使用您的 HTML 的工作演示（加上修复）：http: //jsfiddle.net/jfriend00/LsnnH/

于 2012-10-02T19:16:49.417 回答