Question

我有一个自定义工具提示功能（在jQuery中），它适用于所有[主要]浏览器（甚至在IE8 中） 除外IE7

该网站的doctype是较新的 html 5 doctype （<!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>

有人能说明如何解决这个问题吗？

Answer 1

在IE7 http://jsfiddle.net/Xg7ru/1/

中查看此内容

你所犯的错误并不难理解，你在一个页面中使用id＃port-window 3次，这对CSS来说通常不是问题，但是jQuery将使用给定的方法从DOM中返回第一个元素ID因此它适用于第一张照片。我真的不确定它在其他broswer中是如何工作的。

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

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

Answer 2

主要问题是您有多个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/

Answer 3

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

您可能希望尝试使用.prop()方法。

两者非常相似，但它们之间存在差异，实际上大部分时间.prop()都是正确使用的。

更重要的是，我认为.attr()和旧版本的IE存在错误，因此有些内容适用于.prop()，不适用于.attr()。这可能是其中一种情况。

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

参考：

希望有所帮助。

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

3 个答案: