`

鼠标移动到文字上方显示全部文字

div 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript">
function showDiv(obj,str) {
    var name = obj.innerHTML;
    var sDiv = document.getElementById('txt_' + name.split('.')[0]);//文件名自己判断
    if (!sDiv) {
        sDiv = document.createElement("DIV");
        sDiv.id = 'txt_' + name.split('.')[0];
        sDiv.style.position = 'absolute';
        sDiv.style.top = obj.offsetTop+ 22 + 'px';
        sDiv.style.left = obj.offsetLeft+20  + 'px';
        sDiv.style.width = 200  + 'px';
        sDiv.style.border = '1px black solid';
        sDiv.style.backgroundColor="#FFF9F4";
        sDiv.style["word-break"] = "break-all"; //加上这行 不会出现文字有时不换行
        var spanId = document.createElement("span");
        spanId.innerHTML=str;
        sDiv.appendChild(spanId);
        document.body.appendChild(sDiv);
    }
    sDiv.style.display = 'block';
}

function hideDiv(obj) {
    var name = obj.innerHTML;
    var sDiv = document.getElementById('txt_' + name.split('.')[0]);//文件名自己判断
    if (sDiv) {
        sDiv.style.display = 'none';
    }
}
    </script>
</head>
<body>
<div onmouseover="showDiv(this,'文字显示全了，哈哈')" onmouseout="hideDiv(this)"

style="position:absolute;">文字...</div>
</body>
</html>
分享到：
| textarea 加入长度限制
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics