title在edge浏览器中存在兼容

title

1. title在edge浏览器中存在兼容,划过内容显示5秒左右自动消失,在其他浏览器中都不存在这样的问题。

2. 由于我的项目中很多地方用到title,因此写了一个方法替换title并采用css模拟title功能。

function getHasTitles (parentNode) {
   var allNodes = parentNode.getElementsByTagName('*');
   var length = allNodes.length;
   var node;
   for (var i = 0; i < length; i++) {
      node = $(allNodes[i]).attr('title');
      if (node) {
            var averageLen = parseInt($(allNodes[i]).width()/getByteLen(node));
            var newArr;
            if(node.length > averageLen){
                newArr = node.substring(0,averageLen)+'...';
            } else {
                newArr = node.substring(0,averageLen);
            }
            $(allNodes[i]).html(newArr)
         $(allNodes[i]).attr('data-title', node);
         allNodes[i].classList.add("simulate_title");//添加class名
         $(allNodes[i]).attr('title', '')
      }
   }
}
.simulate_title:hover::after {
   display: block;
   content: attr(data-title);
   position: absolute;
   top: 28px;
    left: -8px;
   z-index: 1000;
   text-align: left;
   background: #fff;
    border: 1px solid #757575;
   color: #666;
   padding: 0 6px;
   font-size: 12px;
   z-index: 999;
   text-decoration: none!important;
   text-indent: 0;
}

你可能感兴趣的:(综合)