用原生js写浮窗显示内容

最新推荐文章于 2022-06-05 15:17:59 发布

百回读

最新推荐文章于 2022-06-05 15:17:59 发布

阅读量464

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/DiegoBrother/article/details/108216886

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .haha {
        width: 100px;
        background: pink;
        position: absolute;
        top: 50px;
        left: 3px;
    }
    .td-style {
        position:relative;
    }
</style>
<body>
<div>
    <table id="tableId">
        <tr>
            <td>
                <span>888</span>
            </td>
            <td>
                <span>777</span>
            </td>
        </tr>
    </table>
</div>
<script>
window.onload = function () {
    getWord();
}
function getWord() {
    tableId = document.getElementById('tableId');
    tdBrand = document.getElementsByTagName('td');
    var span = document.createElement('div');
    for (var i = 0; i < tdBrand.length; i++) {
        tdBrand[i].parentNode.className = 'td-style';
        tdBrand[i].onmouseenter = function () {
            span.className = 'haha';
            this.appendChild(span);
            span.innerText = this.textContent;
        }
        tdBrand[i].onmouseleave = function () {
            span.innerText = '';
        }
    }
}
</script>
</body>
</html>

百回读

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用原生js写浮窗显示内容

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .haha { width: 100px; background: pink; position: absolute; top.
复制链接

扫一扫