Javaweb 鼠标移入移出表格颜色变化的实现
更新时间：2020年09月11日 09:33:47 作者：灰小猿
这篇文章主要介绍了Javaweb 鼠标移入移出表格颜色变化的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
最近在学习JavaWeb时，有用到鼠标移动事件，所以今天在这里记录一个相关的案例，同时也是对相关知识的一个巩固，效果为在鼠标移动到表格对应行列时，该行列的背景颜色发生变化。
效果如下：
其中用到是onmouseover和onmouseou事件t，同时还有一个作用相似的事件叫做onmousemove，所以在这里先对这三种鼠标事件做一个简单的对比：
- 在时间上：如果两个事件同时存在，先是onmousemove事件触发后，才会触发onmouseover事件。
- 在按钮上：onmousemove和onmouseover都不区分鼠标按钮
- 在动作上：onmouseover是在鼠标刚移入区域的时候触发，onmousemove是除了鼠标移入区域时触发外，鼠标在区域内移动同样也会触发事件。
- 两者区别：当鼠标移过当前对象区域时就产生了onmouseover事件，所以onmouseover事件有个移入移出的过程,当鼠标在当前对象区域上移动时就产生了onmousemove事件，只要是在对象上移动而且没有移出对象的，那么就是onmousemove事件。
onmouseout事件则是在鼠标移出对象区域时触发。
搞懂这三者之间的关系，在进行鼠标经过事件的处理时只需使用对应的事件触发即可：
接下来是对上述事件和效果的代码：
Jsp部分代码：
<%@ 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部分代码：
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 鼠标移入移出表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了MyBatis中批量插入和批量更新的实现方法，在日常开发中有时候需要从A数据库提取大量数据同步到B系统，这种情况自然是需要批量操作才行，感兴趣想要详细了解可以参考下文2023-05-05
在平时开发过程中，经常会使用long类型作为id的类型，但是在使用过程中会导致long类型数据转换为number类型时的后两位变为0，今天小编给大家分享Spring Mvc Long类型精度丢失问题，需要的朋友参考下吧2021-06-06
springboot处理url中带斜杠/\字符的参数报400问题
这篇文章主要介绍了springboot处理url中带斜杠/\字符的参数报400问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
作为最基础的引用数据类型,Java设计者为 String 提供了字符串常量池以提高其性能,下面这篇文章主要给大家介绍了关于Java字符串常量池的相关资料,需要的朋友可以参考下2021-08-08
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
这篇文章主要介绍了Eclipse+Java+Swing+Mysql实现电影购票系统并附详细的代码详解，需要的小伙伴可以参考一下2022-01-01
这篇文章主要介绍了Spring Boot打开URL出现signin问题的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-12-12
工作中需要对一个原本加载属性文件的工具类修改成对数据库的操作当然，ado层已经写好，但是需要从Spring中获取bean,然而，工具类并没有交给Spring来管理，所以需要通过方法获取所需要的bean。于是整理了Spring获取bean的几种方法2023-03-03
这篇文章主要介绍了Springboot插件开发实战分享，文章通过新建aop切面执行类MonitorLogInterceptor展开详细的相关内容，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
这篇文章介绍了java中url汉字编码互相转换实例，有需要的朋友可以参考一下2013-10-10
下面小编就为大家带来一篇java对象类型转换和多态性(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
最新评论