Javaweb 鼠标移入移出表格颜色变化的实现
作者:灰小猿 发布时间:2021-08-31 00:03:08
标签: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";
}
}
来源:https://blog.csdn.net/weixin_44985880/article/details/108401258
0
投稿
猜你喜欢
- MyBatisMyBatis 是一款优秀的持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC
- 本文介绍了Android ItemDecoration 实现分组索引列表的示例代码,分享给大家。具体如下:先来看看效果:我们要实现的效果主要
- 今天有朋友问我Struts2中Action必须实现execute方法吗?顺利的回答出来了。其实分两种情况:1)如果你的Action类是继承自
- 建造者模式(Builder Pattern)主要用于“分步骤构建一个复杂的对象”,在这其中“分步骤”是一个稳定的算法,而复杂对象的各个部分则
- import java.io.BufferedReader;import java.io.IOException;import java.i
- SpringBoot web项目启动后立即关闭我们在写spring boot web项目时,有时会遇到启动后立即关闭的情况,或者是无法加载某
- 前言 之前的文章有介绍ActivityGroup,不少人问嵌套使用的问题,同样的需求在Fragment中也存在,幸好在最新的An
- 本文实例为大家分享了AndroidStudio实现能在图片上涂鸦的具体代码,供大家参考,具体内容如下一、内容:设计一个能在图片上涂鸦的程序二
- 本文实例为大家分享了Android实现自动转圈效果展示的具体代码,供大家参考,具体内容如下在values文件夹下创建attrs.xml<
- 普通商户分账功能分账比例:目前只有”低比例分账“小于等于30%分账,分账金额需要减去(千6)手续费.每一张订单只能分发,当前订单总额的百分之
- 前言RxJava 在 GitHub 主页上的自我介绍是 "a library for composing asynchronous
- 通过XmlDocument类修改XML文档数据,通常需要以下几个主要步骤或其中几个步骤。(1)获取一个包含XML文档数据的XmlDocume
- 对于Android开发者来说虽然使用了可以自动管理内存的Java语言,但是对于内存管理不当,可能你的应用不断出现类似INFO/dalvikv
- 项目中需要webview重定向,但是由于一个webveiw里面有许多加载操作,因此在调用webview。goback()方法时,往往达不到我
- Spring在Java EE开发中是实际意义上的标准,但我们在开发Spring的时候可能会遇到以下令人头疼的问题:(1)大量配置文件的定义;
- 参考答案java.sql.Date 是 java.util.Date 的子类java.util.Date 是 JDK 中的日期类,精确到时、
- Arrays 类提供了一个 fill() 方法,可以在指定位置进行数值填充。fill() 方法虽然可以填充数组,但是它的功能有限制,只能使用
- 缘由首先说明一下为什么会有这篇文章。前段时间,插件化以及热修复的技术很热,Nuwa热修复的工具NuwaGradle,携程动态加载技术Dyna
- javax.persistence中@Column定义字段类型在@Column中有个比较强大的配置 columnDefinition,如果有
- 本文实例讲述了如何计算(或者说,估算)一个Java对象占用的内存数量的方法。分享给大家供大家参考。具体分析如下:通常,我们谈论的堆内存使用的