JQuery code for special effects when the mouse moves

  • 2020-03-26 23:46:05
  • OfStack

 
<%@ 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> 
//Import JQuery package
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> 
//Write JQuery event control page
<script type="text/javascript"> 
$(function(){ 
//Event injection point
$("#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"> Class management </td> 
<td id="p2"> Student management </td> 
</tr> 
</table> 
</div> 
<div class="myclass"> 
<table align="center"> 
<tr> 
<td> The class number </td> 
<td> The class name </td> 
<td> note </td> 
</tr> 
<tr> 
<td>A1331</td> 
<td>Java</td> 
<td> good </td> 
</tr> 
<tr> 
<td>A1332</td> 
<td>Java Web</td> 
<td> good </td> 
</tr> 
</table> 
</div> 
<div class="mystu"> 
<table align="center"> 
<tr> 
<td> Serial number </td> 
<td> The name </td> 
<td> gender </td> 
<td> In the class </td> 
</tr> 
<tr> 
<td>100</td> 
<td> Cheng Bowen </td> 
<td> male </td> 
<td>A1339</td> 
</tr> 
<tr> 
<td>101</td> 
<td> Xiao-li hu </td> 
<td> female </td> 
<td>A1339</td> 
</tr> 
</table> 
</div> 
</body> 
</html> 

 

Related articles: