当鼠标移动时出现特效的JQuery代码
更新时间：2013年11月08日 17:51:31 作者：
当鼠标移动时出现特效，在某些情况下还是比较实现的，下面为大家介绍下通过JQuery是如何实现的，具体如下，感兴趣的朋友可以参考下
复制代码 代码如下:
<%@ 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动态添加和删除表格行的方法,实例分析了jQuery中动态操作表格行的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
checkbox全选/取消全选以及checkbox遍历jQuery实现代码2009-12-12
这篇文章主要介绍了JQuery实现当鼠标停留在某区域3秒后自动执行，可以应用于很多场景，需要的朋友可以参考下2014-09-09
jQuery ctrl+Enter shift+Enter实现代码
jQuery中对键盘事件进行了修正 调用函数的时候传入事件即可。2010-02-02
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Slider Revolution插件是一款非常强大的插件了，我们可以利用它来制作出各种效果并且还支持移动设备，支持手机触摸，键盘翻页；它内置幻灯、视频播放计时器等等效果，具体我们来看看。2015-06-06
本篇文章主要是对jquery操作select(取值,设置选中)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
本篇文章主要介绍了easyUI实现类似搜索框关键词自动提示功能示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-12-12
本文给大家汇总介绍了jQuery的几种判断元素的方法，包括是否含有某 class、元素是否存在、是否 checked以及元素是否禁用，都是常用的方法，希望大家能够喜欢2017-02-02
这篇文章给大家介绍了jQuery中clone()函数实现表单中增加和减少输入项的实例代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-05-05
这篇文章主要介绍了springmvc接收jquery提交的数组数据代码分享，还是比较不错的，这里分享给大家，供需要的朋友参考。2017-10-10
最新评论