用js给div添加鼠标悬停事件

最新推荐文章于 2025-05-26 16:40:43 发布

原创最新推荐文章于 2025-05-26 16:40:43 发布 · 2.1w 阅读

5 ·

CC 4.0 BY-SA版权

探索者的基石专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在无法直接修改由OmGrid生成的表格的情况下，通过JavaScript来给表格的某一列添加鼠标悬浮事件。首先，通过Firebug分析表格结构，注意到class名存在空格问题。然后，利用JS代码实现事件监听。尽管需要为每个类别单独编写代码，但最终成功实现了悬浮效果并能调整浮动框位置。

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

新任务:给表格上的某列添加鼠标悬浮事件

但是表格是由omGrid生成的,无法修改

所以只能先获取,再添加事件

先用firebug看清表格结构:\

是div class="innerCo1 " class还是有空格的,为此还纠结了下..

js代码:

var obj = document.getElementsByTagName("div");//先得到所有的div标记
	for(var i=0;i<obj.length;i++)
	{
		if(obj[i].className == 'innerCol ')//找出div标记中class=innerCo1 的那个标记
		{
			var getObj = obj[i];
			value = getObj.innerHTML;//获得innerHTML
			if(value=='用户在待续费期间'){
				getObj.onmouseover=function(){
					show("div1");
				};
				getObj.onmouseout=function(){
					hide("div1");
				};
                         }
                 }
         }

添加事件,使用隐藏显示方法

function show(id) {    

    var objDiv = $("#"+id+"");

    $(objDiv).css("display","block");

    $(objDiv).css("left", event.clientX);

    $(objDiv).css("top", event.clientY+50);  

}

function hide(id) {

    var objDiv = $("#"+id+"");

    $(objDiv).css("display", "none");

}

div里填上内容

<div id="div1" style="color:red;position:absolute;display:none;border:1px solid silver;background:silver;">用户在待续费期间（用户（操作时）状态=待续费）</div>

加载完js后,就可以看到效果了

浮动框的位置也是可以自己调的

最后给每个类别都写个div加上,好多...