Question

问题在于，当我为'wrapper'元素声明title属性时，当光标落在'content'元素内时，会显示一个工具提示。如何防止这种情况（继承）发生？

<style> 
  #content{ margin:25px;}
</style>

<div id='wrapper' title='example'>
  <div id='content'>

  </div>
</div>

（我只希望工具提示在<内容'和'包装'元素的边缘之间显示，而不是两者都有）

Answer 1

我不认为使用纯CSS或HTML是可行的。

破解这种情况的一种方法是使用客户端代码..基本的纯JavaScript示例：

window.onload = function() {
    var oDiv = document.getElementById("content");
    oDiv.onmouseover = function() {
        this.parentNode.setAttribute("old_title", this.parentNode.title);
        this.parentNode.title = "";
    };
    oDiv.onmouseout = function() {
        this.parentNode.title = this.parentNode.getAttribute("old_title");
    };    
};

当鼠标悬停在内容上时，这将“清除”父div标题，并在鼠标离开内容时恢复标题。

实时测试案例：http://jsfiddle.net/UASPZ/

Answer 2

我遇到了同样的问题。我发现你可以通过给子元素一个虚拟标题title=" "来阻止这种情况。

Answer 3

这里也有同样的问题。

发现指定title=' '适用于Chrome和FireFox，但在IE中显示了一个烦人的工具提示。 title=''适用于IE，但完全被Chrome和FireFox忽略，从而显示了父级的工具提示。

没有弄清楚如何在跨浏览器中制作：（

HTML：停止继承父级[title]属性的子元素

3 个答案: