js动态设置鼠标悬浮

最新推荐文章于 2023-11-14 21:19:11 发布

心殇竹墨轩

最新推荐文章于 2023-11-14 21:19:11 发布

阅读量3.3k

点赞数

文章标签： javascript 鼠标

本文链接：https://blog.youkuaiyun.com/mahuiqiao/article/details/76615768

版权

本文介绍了一种使用JavaScript实现鼠标悬浮在TD元素上时动态更改背景图片的方法。通过定义`mover`和`mout`函数，根据TD的ID切换不同的背景图片，实现了鼠标悬停和离开时的视觉效果。

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

js代码自定义鼠标悬浮事件方法

//鼠标悬浮事件
function mover(obj){
var tdId=$(obj).attr("id");
var typeId=$(obj).children().next().val();
if(typeId!="" && typeId!=null){
if(tdId=="td1"){
$(obj).css("background-image","url(${cxt!}/cockpit/event/images/event11_11.png)");
}else if(tdId=="td2"){
$(obj).css("background-image","url(${cxt!}/cockpit/event/images/event12_12.png)");
}else if(tdId=="td3"){
$(obj).css("background-image","url(${cxt!}/cockpit/event/images/event13_13.png)");
}else if(tdId=="td4"){
$(obj).css("background-image","url(${cxt!}/cockpit/event/images/event14_14.png)");
}
}
}
//鼠标移动事件
function mout(obj){
var tdId=$(obj).attr("id");
var typeId=$(obj).children().next().val();
if(typeId!="" && typeId!=null){
if(tdId=="td1"){
$(obj).css("background-image","url(${cxt!}/cockpit/event/images/event01_1.png)");
}else if(tdId=="td2"){
$(obj).css("background-image","url(${cxt!}/cockpit/event/images/event02_2.png)");
}else if(tdId=="td3"){
$(obj).css("background-image","url(${cxt!}/cockpit/event/images/event03_3.png)");
}else if(tdId=="td4"){
$(obj).css("background-image","url(${cxt!}/cockpit/event/images/event04_4.png)");
}
}
}

html页面td调用代码