<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Animation </title>
<style>
. img{width:1000px; height:300px; margin:0 auto; position:relative; margin-top:5px; border-radius:10px; overflow: Hidden;}
. img-0{widt:1000px; height:300px; position:absolute; z-index:21;}
. img-1{widt:1000px; height:300px; position:absolute; z-index:10; Display:none}
. img-2{width:1000px; height:300px; position:absolute; z-index:15; Display:none}
. img-3{width:1000px; height:300px; position:absolute; z-index:20; Display:none}
. img-4{width:960px; height:70px; position:relative; z-index:22; border:1px solid #CCC; border-radius:10px;
margin-top:229px; Float:left; margin-left:20px; Background-color: #000; opacity:0.5; Color:azure;}
. img-4v1{width:275px; height:70px; position:relative; float:left; border-left:1px solid #CCC; line-height:70px;
Text-align:center; font-size:18px;}
. img-4v1:hover{Cursor:pointer;}
</style>
<body>
<div class= "img" >
<div class= "img-0" id= "oo" ></div>
<div class= "Img-1" id= "a" ></div>
<div class= "img-2" id= "B" ></div>
<div class= "img-3" id= "C" ></div>
<div class= "Img-4" >
<div id= "img-a" class= "Img-4v1" style= "margin-left:68px" > "Foreign students Training </div>
<div id= "Img-b" class= "Img-4v1" onmouseover= ">" Students Abroad Exchange </div>
<div id= "img-c" class= "Img-4v1" style= "border-right:1px solid #CCC" > "Staff Abroad Exchange </div>
</div>
</div>
</body>
<script type= "Application/javascript" src= ". /js/jquery-3.2.0.js ">
</script>
<script>
$ (document). Ready (function () {
$ ("#img-a"). MouseEnter (function () {/ * The mouse moves to the div effect * /
$ ("#a"). FadeIn ();/ * Fade in div*/with ID a
$ ("#oo"). Hide ()/ * Hide div with ID oo * /
});
});
$ ("#img-a"). MouseLeave (function () {/ * mouse away from div effect * /
$ ("#a"). FadeOut ();/ * Fade out div*/with ID a
$ ("#oo"). Show ()/ * View ID is oo div * /
});
$ (document). Ready (function () {
$ ("#img-B"). MouseEnter (function () {
$ ("#b"). FadeIn ();
$ ("#oo"). Hide ()
});
});
$ ("#img-B"). MouseLeave (function () {
$ ("#b"). FadeOut ();
$ ("#oo"). Show ()
});
$ (document). Ready (function () {
$ ("#img-C"). MouseEnter (function () {
$ ("#oo"). Hide ()
$ ("#c"). FadeIn ();
});
});
$ ("#img-C"). MouseLeave (function () {
$ ("#c"). FadeOut ();
$ ("#oo"). Show ()
});
</script>
Use jquery for mouse movement to toggle picture animation