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

问题是当我为“包装”元素声明一个标题属性时,当光标位于“内容”元素内部时,会显示一个工具提示.如何防止这种(继承)发生？

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

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

  </div>
</div>

(我只希望工具提示显示在“内容”和“包装”元素的边缘之间,而不是两者)

解决方法

我不认为这是可能的纯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/

原文地址：https://www.jb51.cc/html/224816.html