jQuery中鼠标滑过变颜色

最新推荐文章于 2022-04-28 08:27:49 发布
最新推荐文章于 2022-04-28 08:27:49 发布
阅读量765 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuzhanbin/article/details/77916220
版权

彭帅哥

 jQuery中鼠标滑过变颜色

用DW编写，并且要导入js库

 <!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=gb2312" />
<title>事件的运用</title>
    <style>
        .even{
            background-color:#33CC99;
        }
        .odd{
            background-color:#FFCC66;
        }
        .mouseover{
            background-color:#006699;
        }
        .mousedown{
            background-color:#ff0000;
        }
        td{
            text-align:center;
        }
    </style>

    <script src="../../jQuery/jquery-2.1.0.js"></script>
    <script>
        $(function(){
            $("tbody>tr:even").addClass("even");
            $("tbody>tr:odd").addClass("odd");
            
            $("tbody>tr").mouseover(function(){
                $(this).addClass("mouseover").siblings().removeClass("mouseover");
            });
            $("td").mousedown(function(){
                $(this).addClass("mousedown");
            });
            $("td").mouseup(function(){
                $(this).removeClass("mousedown");
            });
        });
        
    </script>

</head>

<body>
    <center>
        <table width="200px" height="200px" border="1px"  cellspacing="0px">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>20</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>21</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>22</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>赵六</td>
                    <td>23</td>
                    <td>女</td>
                </tr>
            </tbody>
        </table>
    </center>
</body>
</html>


scvas
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 鼠标经过行变色
代码改变生活
01-11 1954
.hover {             background-color: #ff0000;         } 方法1:  $(document).ready(function () {             $("tr").bind("mouseover", function () {                 $(this).css("backg
jQuery实现鼠标滑过行变颜色的表格
weixin_46528860的博客
10-12 1365
jQuery 第一章 jQuery入门 作业1： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/index.css" /> <title></title> </head> <body> <table> <tr st..
jQuery实现鼠标移入移出改变颜色, 以及on中的hover事件不生效的原因
佐月儿
11-11 3211
在对运行时增加的标签绑定事件的时候必须使用on()来绑定 下面的代码是,如果li是在js中新增的,那么绑定是事件无效 $("ul li").hover(function () { $(this).toggleClass("colorClassName") }); 在使用on()绑定事件的时候,不能使用事件hover 下面写的hover事件不会生效 $...
jQuey实现鼠标滑过整行变色
weixin_30908649的博客
11-24 130
前面介绍了<display:table>和<display:column>，接下来主要介绍一下鼠标滑过表格，表格行变色如何实现： <display:table name="requestScope.pageList" id="curPage" class="table table-striped table-hover" sort="external" re...
jquery鼠标移入变色移出恢复
wuliao193728645的博客
04-28 3493
一、需求说明 现需要对一个表格的内容部分做下高亮处理：当鼠标放到这一行时，背景色发生改变；当鼠标移出这一行时，恢复这一行的原有背景色。如下图，原来是除了首行以外，带序号的内容部分，奇偶行背景色交替变化，当鼠标放到第1行时，看到下图的样式，移出该行后，恢复原样。 二、代码实现 table及样式部分： 关键点：1.给table添加边框 2.奇偶行颜色交替 js代码部分： 关键点： 弄清实现思路：移入时需要a.获取该行原有背景色 b.给该行添加新的背景色；移出时，恢复改行原有背景..
jQuery改变鼠标经过行的背景颜色
chuoting1713的博客
08-05 1181
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht...
jQuery实现鼠标滑过Div层背景变颜色的方法
10-24
主要介绍了jQuery实现鼠标滑过Div层背景变颜色的方法,涉及jQuery中hover及addClass方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery实现鼠标滑过鼠标变色功能
06-10
在本教程中，我们将深入探讨如何利用jQuery实现一个功能：当鼠标滑过表格时，使得行背景色发生变化，即所谓的“鼠标悬停高亮”效果。这个效果可以提升用户体验，帮助用户更清楚地识别和跟踪选中的表格行。 首先，...
jquery鼠标滑过菜单颜色渐变显示特效代码
03-20
标题 "jquery鼠标滑过菜单颜色渐变显示特效代码" 涉及的知识点主要集中在JavaScript库jQuery以及与鼠标交互相关的事件处理。在这个特定的场景中，我们关注的是如何使用jQuery来实现一个动态的菜单效果，当用户将鼠标...
jquery鼠标滑过菜单颜色渐变显示.zip
11-22
总的来说，"jquery鼠标滑过菜单颜色渐变显示"是前端开发中的一个基础示例，它展示了HTML5、CSS和jQuery如何协同工作以创造动态的用户界面。通过理解和应用这些技术，开发者能够为网站或应用程序增加更多的互动性和...
jQuery实现table隔行换色和鼠标经过变色的两种方法
10-25
主要介绍jQuery实现table隔行换色和鼠标经过变色的两种方法,需要的朋友可以参考下
如何实现鼠标移入变色，移出还原
09-25
该代码可以实现表格中鼠标在不同行间移动来实现输鼠标移入移出 有颜色提醒的效果
jquery导航制件jquery鼠标经过变色效果示例
12-09
代码如下:<html><head><meta http-equiv=”Content-Type” content=”text/html; charset=utf8″><title>鼠标移到导航上面 当前的LI变色 处于当前的位置</title><style type=”text/css”>ul,li{list-style:none;}#nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;float:left;}#nav li.h_nav_
用js实现鼠标移出移进变换颜色
热门推荐
feilong_12的专栏
02-28 1万+
function a(){ var red=document.getElementById('div1'); red.style.backgroundColor="blue"; } function b(){ var red=document.getElementById('div1'); red.style.backgroundColor="red"; }
PHP鼠标滑过变色命令,jQuery实现鼠标滑过Div层背景变颜色的代码详解
weixin_39800971的博客
03-12 180
jQuery实现鼠标滑过Div层背景变颜色的方法本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法。分享给大家供大家参考。具体实现方法如下：复制代码 代码如下:jQuery实现感应鼠标经过Div层变换图层背景颜色).divbox{height:300px;width:200px;background:#ffffff;border:solid 1px #ccc;float:left;ma...
Jquery实现表格的隔行换色和鼠标悬停单元格变色
qq_41734885的博客
06-19 1860
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;使用JQ完成表格的隔行换色&lt;/title&gt; &lt;script type="text/javascript" src="../js/jquer
用jQuery一句话实现鼠标移上变色
walle的博客
05-06 4656
按钮移上变色效果         $('.round-corner-btn').hover(function(){             $(this).toggleClass('btn-hover', 200);         })
js或jquery鼠标移动上去变颜色代码
最新发布
06-01
你可以使用以下的jQuery代码来实现鼠标移动到元素上时改变颜色的效果： ```javascript $(document).ready(function() { // 当鼠标进入元素时，改变背景颜色 $("your-element-selector").mouseenter(function() { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值