当鼠标移动时出现特效的JQuery代码


Posted in Javascript onNovember 08, 2013
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> 
<head> 
<style type="text/css"> 
*{ 
text-align: center; 
font-size: 12px; 
} 
table{ 
border-collapse: collapse; 
width: 40%; 
} 
table tr td{ 
border: red solid 1px; 
line-height:20px; 
} 
.myclass,.mystu{ 
display: none; 
} 
.myclass table tr td,.mystu table tr td 
{ 
border-top: solid 0px red; 
} 
</style> 
//导入JQuery包 
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> 
//写JQuery事件控制页面 
<script type="text/javascript"> 
$(function(){ 
//事件注入点 
$("#p1").mouseover(function(){ 
$(".myclass").show("slow"); 
$(".mystu").hide(); 
$(this).css("background-color","#ccff99"); 
$("#p2").css("background-color","#ffffff"); 
}); 
$("#p2").mouseover(function(){ 
$(".mystu").show("slow"); 
$(".myclass").hide(); 
$(this).css("background-color","#ccff99"); 
$("#p1").css("background-color","#ffffff"); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="mytop"> 
<table align="center"> 
<tr> 
<td id="p1">班级管理</td> 
<td id="p2">学生管理</td> 
</tr> 
</table> 
</div> 
<div class="myclass"> 
<table align="center"> 
<tr> 
<td>班级编号</td> 
<td>班级名称</td> 
<td>备注</td> 
</tr> 
<tr> 
<td>A1331</td> 
<td>Java</td> 
<td>优秀</td> 
</tr> 
<tr> 
<td>A1332</td> 
<td>Java Web</td> 
<td>优秀</td> 
</tr> 
</table> 
</div> 
<div class="mystu"> 
<table align="center"> 
<tr> 
<td>编号</td> 
<td>姓名</td> 
<td>性别</td> 
<td>所在班级</td> 
</tr> 
<tr> 
<td>100</td> 
<td>程博文</td> 
<td>男</td> 
<td>A1339</td> 
</tr> 
<tr> 
<td>101</td> 
<td>胡晓丽</td> 
<td>女</td> 
<td>A1339</td> 
</tr> 
</table> 
</div> 
</body> 
</html>

当鼠标移动时出现特效的JQuery代码 
Javascript 相关文章推荐
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
bootstrap Table的一些小操作
Nov 01 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 Javascript
详解TypeScript中的类型保护
Apr 29 Javascript
window.onresize 多次触发的解决方法
Nov 08 #Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 #Javascript
setTimeout和setInterval的深入理解
Nov 08 #Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 #Javascript
jquery ajax修改全局变量示例代码
Nov 08 #Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 #Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 #Javascript
You might like
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
Python 函数返回值的示例代码
2019/03/11 Python
python实现祝福弹窗效果
2019/04/07 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
机修工岗位职责
2013/11/24 职场文书
秋季运动会活动方案
2014/02/05 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
高中学生自我评价范文
2014/09/23 职场文书
高三教师工作总结2015
2015/07/21 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
Python经常使用的一些内置函数
2022/04/11 Python
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS