jQuery改变鼠标经过行的背景颜色

最新推荐文章于 2021-08-19 16:36:26 发布
转载 最新推荐文章于 2021-08-19 16:36:26 发布 · 1.2k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：https://my.oschina.net/nly/blog/298231
本文介绍了一个使用jQuery实现的简单效果：当鼠标悬停在表格的行上时，该行背景颜色会变为灰色。通过添加和移除CSS类来实现颜色变化，增强了网页交互体验。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery改变颜色</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

$(function(){

$("#td tr").mouseover(function(){

$(this).addClass("tr1");

});

$("#td tr").mouseout(function(){

$(this).removeClass("tr1");

});

});

</script>

<style>

.tr1{

background-color:gray;

}

#td{

width:400px;

}

</style>

</head>

<body>

<table border="1px" cellspacing="0px" cellpadding="0px" id="td">

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>4</td>

<td>5</td>

<td>6</td>

</tr>

</table>

</body>

</html>


转载于:https://my.oschina.net/nly/blog/298231

标签
#javascript #xhtml #ViewUI
chuoting1713
关注
郭天祥51单片机教程：从入门到实战项目与进阶路线
最新发布
weixin_30617695的博客
06-04 542
单片机作为嵌入式系统的核心，通过执行存储的程序指令来控制外围电路，实现特定功能。其工作原理基于冯·诺依曼或哈佛体系结构，通过总线与内存、I/O端口交互。掌握单片机技术对于理解硬件控制逻辑、培养底层编程思维具有重要价值，广泛应用于工业控制、智能家居和物联网设备等领域。本文以经典的郭天祥《十天学会单片机》教程为切入点，系统拆解了51单片机的核心知识模块，如GPIO控制、定时器中断和串口通信，并规划了从环境搭建到综合项目实战的学习路径。教程强调实践驱动，通过智能温湿度监测仪等实战案例，帮助学习者巩固I/O口操作、
jquery动态添加的表格行鼠标经过时候改变行的背景颜色
dahuzi的专栏
07-31 5459
遇到个小意外。 问题：我的表格是 用append()动态添加的表格行，实现表格鼠标经过 行 时候高亮显示，用bind(),或者.mouseover()+.mouseout()方法不起作用 $("tr").bind("mouseover",function(){ $(this).css("background-color","#FFF"); }); $("tr").bind("mou
jQuery实现table隔行换色和鼠标经过变色
u010784570的专栏
06-25 791
一、隔行换色 [javascript] view plaincopy $("tr:odd").css("background-color","#eeeeee");  $("tr:even").css("background-color","#ffffff");   或者一行搞定： [javascript] view plaincopy $("t
jquery鼠标点击改变控件的背景颜色
热门推荐
goadin的博客
05-13 1万+
记录一下：     $(function () {         //初始化控件，并注册事件         var clickItem = function () {             $(".itemID 子控件名称").css("background", "");             $(".itemID 子控件名称").mouseover(function (
[js jq]一个div,添加鼠标进入事件,鼠标进入div,改变div背景颜色 字体颜色,字体大小,鼠标离开,恢复原样
BigTink的博客
12-16 2313
一个div,添加鼠标进入事件,鼠标进入div,改变div背景颜色字体颜色,字体大小,鼠标离开,恢复原样 1.js实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> .div2{ height: 100px;
JQuery实现表格隔行变色，鼠标经过的行放大显示
hikevin17的专栏
09-28 991
        JQuery以其简洁实用的特点深受开发人员的喜爱，呵呵，我也是才刚刚开始学习的，一来就体会到了这迷人的优势。下面就将自己在课堂上所学和一些新的思想写出来，大家共勉。        JQuery还是适合前台（客户端）开发一些，对于网页设计师也是很容易就能掌握的，因为不用自己去写那一行行艰涩的javascript代码，同时也能屏蔽不同浏览器的差异，就光是这一点就超赞了。    
Jquery的鼠标移入移出事件
qq_44018968的博客
12-10 8147
Jquery的鼠标事件 下面的是我根据https://www.w3school.com.cn/jquery/event_mouseout.asp，然后自己写的一个小总结的代码。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="./js/jquery.min.
鼠标经过时，改变表格行、列的颜色
piaoniu_1985的专栏
06-23 817
鼠标经过时改变一列表格的颜色，也就是大家常说的隔行换色，本方法是比较传统的了，简单易懂，适合刚接触网页制作的菜鸟们。现在方法比较多了，用CSS控制、用jQuery插件，还有些是用背景平铺的方法。 &lt;title&gt;鼠标经过时改变一列表格的颜色&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;table width="240" border="1"&am
【jQuery】如何用jQuery实现鼠标移入后改变背景颜色
tyrantForever的博客
08-06 4657
实现效果如图： jQuery代码实现： $(function () { var oldColor = ""; $(".mouse-in-out").mouseover(function () { originalColor = $(this).css("background-color"); $(this).css("background-color","#d9e8fb"); .
jQuery 实现 当鼠标放表格行上的时候改变背景色。
用自己的双手敲出完美的世界！
12-02 8869
今天是学习jQuery第一天，以前看过，但是没有狠下心去学习，今天起，狠下心来好好学。jQuery的事件去掉了js中的on 比如 onclick 在jQuery 中就是click.下面是我今天写的一个例子，当鼠标放在行上的时候改变背景色。 无标题页<!-- $(function(){ $("#tb tr").mouseove
JQuery鼠标经过表格行变色
数元技术博客
06-05 229
[code="html"] JQuery鼠标经过表格行变色 $(function(){ //文档加载 $("#tb").width(520); //设置表格宽度为520像素 $("#tb").height(250); //设置表格的高度为250像素 $("#tb").css(...
[ js实例 ] 鼠标移动改变背景
L_melody的博客
12-10 753
鼠标移到不同行上时背景色改变，可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色 <table border="1" width="50%" id="table"> <tr> <th>学号</th> <th>姓名</th> <th>操作</th> </tr> ...
练习案例_鼠标经过表格行变色
06-09 190
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text...
Jquery-01-隔行换色鼠标指向表格并且行变色
此后如竟没有炬火我便是唯一的光
08-19 1206
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src=.
html设置鼠标移动变色,table行随鼠标移动变色示例
weixin_42308335的博客
06-04 2206
1、设计表格工号姓名年龄性别2014010101张峰56男2014010102李玉42女2014010103王珂36男2014010104张钰31女2014010105朱顾44男2014010106胡雨35女2014010107刘希30男2014010108孙宇45女2014010109谷雨33男2014010110科宇45女2、设计样式.html_body .body_div{width: 13...
动态添加的表格行在鼠标经过时候改变行的背景颜色
qq_41685347的博客
10-10 484
$("table").delegate("tr", "mouseover", function ()  {     //$(this).addClass("tr-mouseover")     $(this).css("background-color", "AliceBlue"); }); $("table").delegate("tr", &q
【JQuery】鼠标经过表格行变色
luckyjaky的专栏
03-11 180
[color=darkred][/color] JQuery鼠标经过表格行变色 $(function(){ //文档加载 $("#tb").width(520); //设置表格宽度为520像素 $("#tb").height(250); //设置表格的高度为250像素 $("#tb").css("background-color","#00...
鼠标悬停在一个元素上改变另一个元素的样式
AiTingYan的博客
04-24 1万+
1.A元素是B元素的父级 A:hover B{ //鼠标经过A元素时，B元素背景会变成黑色 background:#000; } 2.A元素与B元素相邻且A紧接着B A:hover +B { //鼠标经过A元素时，B元素背景会变成黑色 background:#000; } ...
jQuery学习心得----鼠标经过时改变table行的背景色
ClareQi的博客
08-30 3846
学习了jQuery选择器，下面给大家一个关于选择器的例子，注释很详细，大家可以自己体会。                 Title     .tr1{background-color: #FF9933;}     $(function(){         //$("#tb tr")--选择id为tb的table，再选择该table的行tr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值