关于JS鼠标离开恢复原来单元格的格式

//鼠标经过

$(".x-table tr").mousemove(function() {

//所在行背景色:红色

        $(this).css("background-color","#6cc1f9");

//所在行单元格字体:18px

        $(this).find("td").css("font-size","18px");

});

//鼠标点击

$(".x-table tr").mousedown(function() {

//所在行背景色:黄色

        $(this).css("background-color","yellow");

//所在行单元格字体:18px        

        $(this).find("td").css("font-size","18px");

});

//鼠标离开

$(".x-table tr").mouseout(function() {

//所在行背景色:白色

        $(this).css("background-color","white");

//所在行单元格字体:12px 

       $(this).find("td").css("font-size","12px");

});


想问一下鼠标离开怎么恢复到原来字体大小原来背景色,怎么写,一定是恢复到原生态的时候,因为每行字体大小都不一样。

比如:我原来字体大小是15,鼠标移到这行变成18,移走之后还要变成15,现在是移走就变成12了


FineReport 小田 发布于 2019-7-10 09:52 (编辑于 2019-7-10 10:09)
1min目标场景问卷 立即参与
回答问题
悬赏:4 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共4回答
最佳回答
0
小田Lv5见习互助
发布于2019-7-10 13:32

已经解决了,这是我写的

var $lasttd;//上一个行变量

var lastcolor;//上一次颜色变量

var typeface;//上一次字体大小变量

$(".x-table tr").mousemove(function() {

if($lasttd){

$lasttd.css('background',lastcolor);

$lasttd.find("td").css("font-size",typeface);

}//离开后原单元格恢复原色和字体

lastcolor=$(this).css('background-color');

typeface=$(this).find("td").css("font-size");

if(!lastcolor)

lastcolor=$(this).css('background');//保存原始颜色

$(this).css('background','#f0dad2');//设置当前单元格为红色

if(!typeface)

typeface=$(this).find("td").css("font-size");//保存原始字体大小

$(this).find("td").css("font-size","18px");//设置当前单元格字体大小为18

$lasttd=$(this);//保存上一个单元格

}); 


  • doudekaixin doudekaixin 怎么你的所有问题最佳都是自己。。 而且我感觉你这段代码貌似有问题。貌似实现不了你的效果。
    2019-07-10 14:53 
最佳回答
0
doudekaixinLv6中级互助
发布于2019-7-10 09:55(编辑于 2019-7-10 10:20)

把12px改成15pximage.png

  • 小田 小田(提问者) 我把这行删掉的效果是鼠标移动上面字体变大,鼠标移走的时候就不变小了
    2019-07-10 10:04 
  • 小田 小田(提问者) 移走还是变大的效果,就不动了
    2019-07-10 10:04 
  • doudekaixin doudekaixin 回复 小田(提问者) 你把你的CPT带数据传上来。
    2019-07-10 10:15 
  • doudekaixin doudekaixin 回复 小田(提问者) 你的字号是15,那你把12px改成15px
    2019-07-10 10:19 
  • 小田 小田(提问者) 回复 doudekaixin 每行的字体大小都不一样,不能设置固定的大小,要移走恢复到原来字体
    2019-07-10 10:24 
最佳回答
0
Kevin-sLv7中级互助
发布于2019-7-10 10:11(编辑于 2019-7-10 10:12)

//鼠标经过

$(".x-table tr").mousemove(function() {

//所在行背景色:红色

        $(this).css("background-color","#6cc1f9");

//所在行单元格字体:18px

        $(this).find("td").css("font-size","18px");

});

//鼠标点击

$(".x-table tr").mousedown(function() {

//所在行背景色:黄色

        $(this).css("background-color","yellow");

//所在行单元格字体:18px        

        $(this).find("td").css("font-size","18px");

});

//鼠标离开

$(".x-table tr").mouseout(function() {

//所在行背景色:白色

        $(this).css("background-color","white");

//所在行单元格字体:12px 

       $(this).find("td").css("font-size","15px");

});


你将这段代码复制进去,将12改成15就可以了,如果你要回到原来背景色,只要把white改成原来的颜色就可以了


  • 小田 小田(提问者) 你这还是不行,如果原来字体,有的行是13,有的行是15,原来13的也变成15了
    2019-07-10 10:19 
  • Kevin-s Kevin-s 回复 小田(提问者) 那你只能给13的单元格和15的单元格分别设置,毕竟你点击的时候已经把字体大小给改变,你需要重新设置字体大小才能变回来,所以楼主,应该只能分开设置
    2019-07-10 10:22 
最佳回答
0
KerydiaLv5中级互助
发布于2019-7-10 10:41

直接在单元格写H5

<span onmouseover="this.style.color='red'" onmouseout="this.style.color='white'"   >金额</span>

类似上面,写完之后要选择一下用HTML显示内容

image.png

  • 3关注人数
  • 615浏览人数
  • 最后回答于:2019-7-10 13:32
    请选择关闭问题的原因
    确定 取消
    返回顶部