Question

好的浏览器都可以工作，元素的空“title”属性意味着“不要在这里显示标题天桥”。这是有道理的，因为对于大多数人来说，没有任何东西（编辑 - 或者只是空格角色）的小白色天桥是完全没用的。

IE的设计者不同意。

我的问题是我有一点“这是什么？”网站上的机制涉及绝对定位的<div>，其中包含一个小问号图形。那个<div>有一个“标题”属性，其问题是“历史橡皮擦按钮'做什么？”当您单击问号时，会弹出一个小“帮助”气泡，您可以阅读该主题。 “标题”的概念是，如果用户将鼠标悬停在问号上，他们就会看到一个（希望是）他们可能想知道的问题。

“标题”的问题是弹出式“帮助”气球位于绝对定位的<div>内，以便它正确地位于页面上。换句话说，绝对定位的<div>只有“position：absolute”，但它允许在“右”位置的页面上删除而不进行任何偏移计算。因此，“帮助”气球在正确的位置自动排序。但是：父<div>上的“标题”令人讨厌，因为浏览器会在气球打开后弹出。为什么？因为“帮助”气球在词法上包含在外部<div>中，即使外部<div>只是一个带有问号的小东西。

因此解决方案＃1将“帮助”气球<div>赋予其自己的“标题”属性，其中没有任何内容（编辑 - 我得到了错了;标题中不是 nothing ，它是一个空格字符）。除了在IE中，这很好用。现在在IE中，那个空的“title”属性会导致浏览器放置一个小的空白矩形。有帮助的。

我当然可以摆弄Javascript，只是在气球显示时从父<div>中取出“title”属性，但我很好奇可能的方法来“覆盖”父元素“title” “在IE中只能用标记来完成。如果不可能，那么哦。

简单演示页面：http://gutfullofbeer.net/title.html（尝试使用IE 7或8查看小空白框）

编辑 - 哈哈哈 - 当我更改我的代码以便明确地将所有父元素上的“title”属性置空时，IE会在其中显示一个带有“null”字样的天桥： - ）

Answer 1

为什么不将标题分配给问号元素（#qmark）而不是包含div？所以而不是：

<div title="this is the overlapping title">  
    <div id="qmark">?</div>
    <div id="hiddenContainer"></div>
</div>

它将是

<div>
    <div id="qmark" title="this title no longer overlaps">?</div> 
    <div id="hiddenContainer"></div>
</div>

Answer 2

我认为你不能做你想做的事。无论如何它似乎是一个黑客 - 子DOM元素属性并不意味着“覆盖”父属性。您应该使用正确的标题包装特定文本，例如：

http://jsbin.com/ezipe

Answer 3

我最终扩充了现有的代码，用于打开/关闭“帮助”气泡，以便它运行父元素链并使用jQuery“data”工具存储“标题”代码。当气泡关闭时，标题会恢复。

防止父元素的“title”属性导致浏览器悬停

3 个答案: