鼠标移动整行变色

最新推荐文章于 2021-06-25 14:41:46 发布
最新推荐文章于 2021-06-25 14:41:46 发布
阅读量167 收藏 1
点赞数
分类专栏： JQuery 文章标签： javascript java ViewUI
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>网上订餐系统</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<link rel="stylesheet" href="css/pagestyle.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.6.1.js"></script>

<style type="text/css">
.td1{background-color:Silver;}
</style>
<script language="javascript">


//页面初始化时处理相关信息
$(function(){

//改变网页背景颜色
$("#changeBgColor").change(function(){
var bgColor = $(this).val();
$("body").css("background-color",bgColor);
});

$("#tb tr").mouseover(function(){
$(this).addClass("td1");
});
$("#tb tr").mouseout(function(){
$(this).removeClass("td1");
});

});
</script>
</HEAD>


<body id="ddd" bgcolor="green" leftMargin=100 topMargin=20 marginheight="0" marginwidth="0">
<input type="text" value="test"><br><br>
改变网页背景:
<select id="changeBgColor">
<option value="green" selected>绿色</option>
<option value="blue">蓝色</option>
<option value="red">红色</option>
<option value="yellow">黄色</option>
</select>



<form id="form1" runat="server">
<table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>籍贯</th>
<th>手机</th>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
</table>
</form>


</body>

</HTML>
zengshaotao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jQuey实现鼠标滑过变色(整行变色)
09-03
标题中的“基于jQuery实现鼠标滑过变色(整行变色)”是指使用JavaScript库jQuery来创建一种交互式网页效果，即当用户将鼠标光标移动到网页中的某个元素（如列表项）上时，该元素及其相关部分会改变颜色，以提供视觉...
QTableWidget 实现鼠标划过时，整行背景颜色及字体边框的变化
最新发布
12-21
这就是如何在Qt的QTableWidget中实现鼠标划过时整行背景颜色和字体边框变化的基本步骤。这个过程涉及到对Qt事件处理机制的理解，以及对QTableWidget特性的掌握。希望这个详解能够帮助你完成你的项目。如果你需要更...
dom （委托应用1）
qq_45827064的博客
05-16 100
表格变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl.
鼠标移动上去后，行变色
天地会
04-24 801
方法一：   方法二： $(function(){   $(".thisTR").mouseover(function(){   $(this).removeClass();   $(this).addClass("trmouseOver"); }).mouseout(function(){   $(this).removeClass();   $(thi
鼠标所在行变色
hyb0852的专栏
03-04 284
table{width:700px;border:1px solid orange;margin:auto;border-collapse:collapse}   td{border:1px solid orange}   .odd{background-color:#FFC}   .even{background-color:#CCC}   .old{background-color:r
Excel鼠标所在行列填充颜色
TT-Learning
11-21 3298
打开需要设置的工作簿，按下快捷键：Alt + F11 在跳出的窗口中，双击选中需要设置的工作簿，填充如下内容： Private Sub Worksheet_SelectionChange(ByVal Target As Range) With Target .Parent.Cells.Interior.ColorIndex = xlNone .Entir...
CSS如何实现把鼠标放在行上整行变色
weixin_30375247的博客
01-29 514
CSS如何实现把鼠标放在行上整行变色: 在很多网站都有这样的效果，那就是当鼠标放在一个文章列表行的时候，此行就会显示与其他行不同的颜色，本站的文章列表也具有这样的效果，便于浏览者识别，非常人性化，下面就简单介绍一下如何实现此效果。代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="u...
QTableView鼠标滑过整行背景色改变.zip
07-09
通过以上步骤，我们就能够实现`QTableView`鼠标滑过整行背景色改变的效果。这个功能可以提升用户体验，使用户更容易感知到他们正在与哪一行数据交互。在实际应用中，还可以结合其他交互元素，如高亮选中行、显示行号...
键盘方向键移动表格中的光标(包含鼠标选择)
02-17
标题“键盘方向键移动表格中的光标(包含鼠标选择)”揭示了一个重要的操作技巧，即如何利用键盘和鼠标来精准控制表格内的光标移动及选区选择。下面将详细阐述这些知识点。 首先，键盘方向键在表格操作中的作用不可...
鼠标移到表格的某一行，那一行变色的问题
rookie_s的博客
11-19 1万+
这个实现的过程很简单，网上相关实现的例子很多，这里记录下自己之前实现的方法。参考的网上的例子，网址不记得了。  这个问题简单点就是鼠标响应事件。 下面放代码     var rows = document.getElementsByTagName('tr');//取得行         for(var i=0 ;i         {             r
当鼠标移动到表格的一行时这一行的背景颜色发生改变
muyuren123的博客
12-11 6245
当鼠标移动到表格的一行时这一行的背景颜色发生改变 方法一：       当鼠标经过表格的一行时这一行的背景颜色发生改变      table, th, tr, td{     width:500px;     border:1px solid red;     border-collapse:collapse;    }    tr, td{     text-
HTML中实现鼠标经停整行(tr)变色
热门推荐
ljgllxyz的专栏
08-17 2万+
在网页制作的过程中有时候要实现那种在鼠标经过一个表格的某一行的时候，要整行的背景颜色发生变化，以表明该行正中焦点，网上有一大堆这方面的代码，但是好多都还要加上一大堆得javascript代码，本人再次自己写了个简单实用的小代码 1.首先在之前插入这么一段代码 tr.change:hover { background-color:#00FF00 } 然后再要变色的表格处的标签
table鼠标滑入tr整行背景变色
weixin_45301765的博客
07-06 858
之前公司让做一个鼠标滑入tr整行变色, 我一直在纠结应该怎么写 试了几次hover 发现效果不太满意 然后找了好长时间百度 终于找到了这个脚本 不多BB直接看代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>鼠标滑入tr整行变色...
鼠标悬浮在表格上，所在行变色
qq_48964916的博客
06-25 501
控制选中行的背景颜色 background：rgba(0,0,0,0) 前三个值（红绿蓝）的范围为0到255之间的整数或者0%到100%之间的百分数。这些值描述了红绿蓝三原色在预期色彩中的量。 第四个值，alpha值，制定了色彩的透明度/不透明度，它的范围为0.0到1.0之间,0.5为半透明。 rgba(255, 255, 255, 0)则表示完全透明的白色 rgba(0, 0, 0,1 )则表示完全不透明度的黑色 ...
页面鼠标滑过某行时背景变色（简单一例）
梨木乔
09-17 1851
Insert title here
table 鼠标滑过整行变色
03-30
例如，将表格中每一行的背景颜色设置为白色，然后使用:hover来设置当鼠标悬停在该行上时，背景色变为灰色： ``` table tr { background-color: white; } table tr:hover { background-color: gray; } ``` 您...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值