图像 Alt 和标题不显示，因为 Z-index答案

【问题标题】：Image Alt & Title not displaying because Z-index图像 Alt 和标题不显示，因为 Z-index
【发布时间】：2012-06-29 08:35:22
【问题描述】：

这是我的问题，我的 HTML 中有几张使用 z-index 排序的图像。但是底部图像的属性 Alt 和 Title 不会在 Firefox 和 Chrome 中显示（IE 工作...）。有办法吗？谢谢！

<img src="images/one.png" style="position:absolute;z-index:0;" alt="This one" title="This one"/> 
<img src="images/two.png" style="position:absolute;z-index:1;" alt="" title=""/> 
<img src="images/three.png" style="position:absolute;z-index:2;" alt="" title=""/>

第三张图片 (three.png) 是覆盖其他两张图片的透明层。我希望 alt 是要显示的第一个 (one.png) 的标题。很抱歉解释的laq，简单的问题似乎最难解释:)

更新

好的，这是 a 制作的脚本：

`$('.animated').each(function(index) {

    var attr = $(this).attr('title');
    if (!attr) {
} else{
        var newId = 'wrapper_' + index;
        $(this).wrap('<div id="' + newId + '"></div>');
        var tit = $(this).attr('title');
        var pst = $(this).css('margin-top');
        var stp = $(this).css('margin-left');
        $('#' + newId).prepend('<div style="position:absolute;z-index:1000;width:' + $(this).width() + 'px;left:50%;top:50%;height:' + $(this).height() + 'px;margin-left:' + stp + ';margin-top:' + pst + ';" title="' + tit + '"></div>');
    }
});`

所以这意味着当图像有标题时，会在其上创建一个带有巨大 zindex 的 div。

【问题讨论】：

进一步解释？当您提供如此简短的描述时，没有人可以帮助您。
好吧，让我们想象一下：第三张图片 (three.png) 是覆盖其他两张图片的透明层。我希望 alt 是要显示的第一个（one.png）的标题。很抱歉解释的滞后，简单的问题似乎最难解释:)

标签： html css firefox title alt

【解决方案1】：

由于某种原因，我的帖子被删除了，请参阅以下内容：

如果你有一个透明图像覆盖另外两个，那么 alt 和 title 标签将从另外两个顶部的透明层中拉出，因为它无法识别下面的另外两个。

如果您只想显示第一张图片的标题和替代文本，则将这些值分配给透明层。

IE 可能正在渲染图像的 alt 文本，而其他浏览器在图像存在时不会渲染。

【讨论】：

@casperOne - 你能告诉我你为什么决定删除我以前的答案吗？谢谢
有没有办法获取title元素并用jquery显示出来？
$('#imageID').attr('title', 'This One'); 应该更改图像的标题元素。你可以在一个函数中使用它，当（图像 1）显示时，将图像 3 的标题显示为“这个”。
事实是一个不知道标题的内容。我的 BO 为每个图像添加了一个类（动画），所以我编写了以下代码：'$(".animated").each(function () { var attr = $(".animated").attr('title') ; if(attr !== undefined) { this.hover( function(){ alert (attr); }); }});'但它不起作用......
试试这个$(".animated").each(function () { var attr = $(".animated").attr('title'); if(attr !== undefined) { $(this).hover( function(){ alert(attr) }); }});