用原生js写浮窗显示内容

最新推荐文章于 2025-01-16 13:37:20 发布

百回读

最新推荐文章于 2025-01-16 13:37:20 发布

阅读量525

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/DiegoBrother/article/details/108216886

版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

<!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>