个人中心
gpt4 book ai didi

Javaweb 鼠标移入移出表格颜色变化的实现

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Javaweb 鼠标移入移出表格颜色变化的实现由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

最近在学习JavaWeb时，有用到鼠标移动事件，所以今天在这里记录一个相关的案例，同时也是对相关知识的一个巩固，效果为在鼠标移动到表格对应行列时，该行列的背景颜色发生变化.

效果如下:

Javaweb 鼠标移入移出表格颜色变化的实现

其中用到是onmouseover和onmouseou事件t，同时还有一个作用相似的事件叫做onmousemove，所以在这里先对这三种鼠标事件做一个简单的对比:

  • 在时间上：如果两个事件同时存在，先是onmousemove事件触发后，才会触发onmouseover事件。
  • 在按钮上：onmousemove和onmouseover都不区分鼠标按钮
  • 在动作上：onmouseover是在鼠标刚移入区域的时候触发，onmousemove是除了鼠标移入区域时触发外，鼠标在区域内移动同样也会触发事件。
  •  两者区别：当鼠标移过当前对象区域时就产生了onmouseover事件，所以onmouseover事件有个移入移出的过程,当鼠标在当前对象区域上移动时就产生了onmousemove事件，只要是在对象上移动而且没有移出对象的，那么就是onmousemove事件。

onmouseout事件则是在鼠标移出对象区域时触发.

搞懂这三者之间的关系，在进行鼠标经过事件的处理时只需使用对应的事件触发即可:

接下来是对上述事件和效果的代码:

Jsp部分代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<%@ page language= "java" import = "java.util.*" pageEncoding= "utf-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+ "://" +request.getServerName()+ ":" +request.getServerPort()+path+ "/" ;
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
  <head>
   <base href= "<%=basePath%>" rel= "external nofollow" >
  
   <title>表格颜色变化</title>
  <meta http-equiv= "pragma" content= "no-cache" >
  <meta http-equiv= "cache-control" content= "no-cache" >
  <meta http-equiv= "expires" content= "0" > 
  <meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
  <meta http-equiv= "description" content= "This is my page" >
  <!--
  <link rel= "stylesheet" type= "text/css" href= "styles.css" rel= "external nofollow" >
  -->
  <script type= "text/javascript" src= "index.js" ></script>
  </head>
 
  <body>
   <table width = "200" border = "1" align = "center" cellpadding= "1" cellspacing= "5" >
   <tr id = "t0" ><th>学校</th><th>专业</th><th>人数</th></tr>
   <tr id = "t1" ><th>济大</th><th>软件</th><th> 2000 </th></tr>
  <tr id = "t2" ><th>北大</th><th>机械</th><th> 3000 </th></tr>
  <tr id = "t3" ><th>浙大</th><th>生物</th><th> 4000 </th></tr>
 
   </table>
  </body>
</html>

Js部分代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
onload = function () {
  var t0 = document.getElementById( "t0" );
  var t1 = document.getElementById( "t1" );
  var t2 = document.getElementById( "t2" );
  var t3 = document.getElementById( "t3" );
 
  t0.onmouseover = function () {
    t0.style.backgroundColor = "green" ;
   }
  t0.onmouseout = function () {
    t0.style.backgroundColor = "white" ;
   }
  t1.onmouseover = function () {
    t1.style.backgroundColor = "red" ;
   }
  t1.onmouseout = function () {
    t1.style.backgroundColor = "white" ;
   }
  t2.onmouseover = function () {
    t2.style.backgroundColor = "red" ;
   }
  t2.onmouseout = function () {
    t2.style.backgroundColor = "white" ;
   }
  t3.onmouseover = function () {
    t3.style.backgroundColor = "red" ;
   }
  t3.onmouseout = function () {
    t3.style.backgroundColor = "white" ;
   }
}

到此这篇关于Javaweb 鼠标移入移出表格颜色变化的实现的文章就介绍到这了,更多相关Javaweb 鼠标移入移出表格内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://blog.csdn.net/weixin_44985880/article/details/108401258 。

最后此篇关于Javaweb 鼠标移入移出表格颜色变化的实现的文章就讲到这里了,如果你想了解更多关于Javaweb 鼠标移入移出表格颜色变化的实现的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： 据说这个是可以撸到2089年的idea2020.2(推荐)
文章推荐： Java 实现图片压缩的两种方法
文章推荐： JAVA 实现磁盘文件加解密操作的示例代码
文章推荐： IntelliJ Plugin 开发之添加第三方jar的示例代码
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com