JS小功能，鼠标经过标签时悬浮层提示+点击可复制文字

最新推荐文章于 2025-06-28 11:29:02 发布

原创最新推荐文章于 2025-06-28 11:29:02 发布 · 1.3w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#鼠标 #悬浮层 #复制 #文字 #JS

【JavaScript】专栏收录该内容

7 篇文章

订阅专栏

本文介绍两种使用JavaScript实现的鼠标悬浮提示及文字复制功能。一种通过设置HTML元素的title属性来展示提示信息，另一种则利用自定义浮层实现更灵活的效果，并提供复制按钮文字到剪贴板的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两个JS小功能，鼠标经过标签时实现悬浮层提示，点击可复制文字。

比较简单，直接看代码了。O(∩_∩)O~

小记以备忘。

<HTML>
<HEAD>
    <META NAME="GENERATOR" Content="oscar999">
</HEAD>

<BODY>
<script>
    function returnMain()
    {
        window.returnValue = "====return from sub====";
        window.close();
    }
    function copy1()
    {
        var btn1 = document.getElementById('button1');
        //复制文字内容
        window.clipboardData.setData("Text",btn1.value);
        alert("复制成功!");
    }
    function copy2()
    {
        var btn2 = document.getElementById('button2');
        //复制文字内容
        window.clipboardData.setData("Text",btn2.value);
        alert("复制成功!");
    }
    function overShow() {
        var showDiv = document.getElementById('showDiv');
        showDiv.style.left = event.clientX;
        showDiv.style.top = event.clientY;
        showDiv.style.display = 'block';
        showDiv.innerHTML = '点击复制文字';
    }
    function outHide() {
        var showDiv = document.getElementById('showDiv');
        showDiv.style.display = 'none';
        showDiv.innerHTML = '';
    }
</script>

<!--方法一：用title显示浮层-->
<input id = 'button1'  type="button" name="copycontent" onClick="copy1()" title="点击复制文字" value="点击复制文字内容1">
<br>
<br>
<!--方法二：自定义浮层-->
<input id = 'button2' type="button" name="copycontent" onClick="copy2()" onmouseover="overShow()" onmouseout="outHide()" value="点击复制文字内容2">

<div id="showDiv" style="position: absolute; background-color: white; border: 1px solid black;"></div>

</BODY>
</HTML>