当前位置:首页 > 开发 > 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

    震惊

    震惊

编辑推荐
纯css 鼠标经过显示动画 替换文字内容 演示 <span style="margin: auto; padding: 0px 0px 0px 5
1、效果及功能说明 文字特效制作文字鼠标滑过变色多彩色效果显示,颜色随机匹配变色显示,酷炫效果 2
今天给大家分享一款随着鼠标移动的文字阴影特效。该实例的文字用了阴影特效,阴影会随鼠标上下移动
1、获取选中的文字: document.selection.createRange().text; IE9以下使用 window.getSelection().
今天给大家分享一款随着鼠标移动的文字阴影特效。该实例的文字用了阴影特效,阴影会随鼠标上下移动
<img src="http://img.it610.com/image/info2/d373d6d42efc456584e370762e60cb17.jpg" alt="标签
1、效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐
节约大家时间,先说结论: 1、是否文字中包含了\r\n等字符,flash中,\r和\n都会换行。需要过滤掉其
页面使用DIV+CSS布局,嵌套比较多,如果添加了注释,会造成字符重复显示。 页面代码: <body>
情况1: 1 <!--情况1--> 2 <div style="line-height: 60px; height: 60px;"> 3 <img
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号