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 鼠标移入移出表格内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库！
-
问题内容： 我实现了一个简单的鼠标侦听器，每当鼠标进入组件（JPanel）时，背景颜色都会改变，每当鼠标离开时，背景颜色就会恢复。这有一些问题： 有时鼠标移动得太快，以至于不会触发 mouseExit 事件 如果我的组件有子级，则当鼠标移至子级时会触发 mouseExit 如果我将鼠标快速移至儿童，则不会触发 mouseEnter 事件 我猜这对Swing老兵来说很容易。对于如何解决这个问题，有任
-
本文向大家介绍纯JS代码实现隔行变色鼠标移入高亮，包括了纯JS代码实现隔行变色鼠标移入高亮的使用技巧和注意事项，需要的朋友参考一下 在前端开发中经常见到隔行变色鼠标移入高亮显示的效果，下面小编给大家分享基于js代码实现的隔行变色鼠标移入高亮效果，废话不多说了，具体代码如下所示： 以上所述是小编给大家介绍的纯JS代码实现隔行变色鼠标移入高亮，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及
-
本文向大家介绍jquery实现图片列表鼠标移入微动，包括了jquery实现图片列表鼠标移入微动的使用技巧和注意事项，需要的朋友参考一下 本效果使用jQuery和CSS实现了图片列表，当鼠标移入时图片向左微动，移出则复原。 其中的jQuery事件使用mouseenter 和 mouseleave ，事件绑定方法使用新推荐的on方法。 代码如下： 以上就是本文的全部内容，希望对大家有所帮助，同时也希望
-
任务是将物理光标移动到元素。 尝试以下操作： 和以下内容：
-
本文向大家介绍JavaScript实现鼠标经过表格某行时此行变色，包括了JavaScript实现鼠标经过表格某行时此行变色的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码，供大家参考，具体内容如下 表格表头为蓝色，表主体为白色，当鼠标放到表的非表头行时，这一行颜色变为黄色，鼠标离开时黄色消失。 以上就是本文的全部内容，希望对大家的学习有所帮助，
-
我正在尝试创建一个工作表，我们的员工可以点击一个单元格来突出显示他们正在执行任务，然后当他们完成任务时再点击它，如果他们需要清除突出显示，再点击它第三次。到目前为止，我已经提出了下面的工作，除了我必须点击另一个单元格，再次回到相同的一个，否则它将尝试编辑该单元格。我只想1点击颜色变化，另点击相同的单元格颜色变化2，另点击相同的单元格颜色变化3。有什么办法可以做到这一点吗？