当前位置:首页 > 开发 > Web前端 > 前端 > 正文

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

发表于: 2014-12-03   作者:cuityang   来源:转载   浏览:
div
摘要: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"         "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>
<!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>

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号