js 鼠标移动到控件显示控件的文本信息移出则不显示

最新推荐文章于 2025-04-20 09:45:00 发布

arui_email

最新推荐文章于 2025-04-20 09:45:00 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： js相关技术资料信息

本文链接：https://blog.youkuaiyun.com/arui_email/article/details/8720884

js相关技术资料信息专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用JavaScript和CSS实现鼠标移到控件上显示其文本信息的功能。通过在HTML中添加div并设置CSS样式，然后利用jQuery监听鼠标悬停事件，展示信息框。

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

第一步，在html里面嵌入div，并写css

<div id="showinfo"></div>

#showinfo{top:-100;width:220;heigth:30;background:#a9dbf6;border:1px solid #a3bbce;position:absolute;}

第二步，当鼠标移动到元素上时，将信息框呈现出来。

/**当鼠标移动到元素上时，将信息框呈现出来******/
function onMouseMove()
{
showInfo.innerHTML='这是一个由js控制的信息框...';
showInfo.style.left = event.clientX + document.body.scrollLeft +20;
showInfo.style.top = event.clientY + document.body.scrollTop;
}
/**当推动鼠标事件，将信息框隐藏起来*****/
function onMouseOut()
{
showInfo.style.left = -100;
showInfo.style.top = -100;
}
var text36 = document.getElementById('text36');
var showInfo = document.getElementById('showInfo');
showInfo.style.top = showInfo.top;
text36.onmousemove = onMouseMove;
text36.onmouseout = onMouseOut;

如果用jquery的话，则代码如下：

/***参数介绍：divId是你要浮动显示层的ID，value你要给这个提示层里面放的值***/
$.fn.myHoverTip = function(divId, value) {
    var div = $("#" + divId); //要浮动在这个元素旁边的层
    div.css("position", "absolute");//让这个层可以绝对定位
    var self = $(this); //当前对象
    self.hover(function() {
        div.css("display", "block");
        var p = self.position(); //获取这个元素的left和top
        var x = p.left + self.width();//获取这个浮动层的left
        var docWidth = $(document).width();//获取网页的宽
        if (x > docWidth - div.width() - 20) {
            x = p.left - div.width();
        }
        div.css("left", x);
        div.css("top", p.top);
        div.html(value);
    },
    function() {
        div.css("display", "none");
    }
    );

    return this;
}
$(function() {
    $("#text36").myHoverTip("showInfo","12e23e32edasdsad");
});