This example uses jquery to manipulate the CSS of Div, to achieve a hidden reappearance of the side of the hover layer, preview effect URL: http://www.keleyi.com/keleyi/phtml/xuanfudiv/
This example uses the two methods of adding a removal class to jquery, for details please refer to the URL: http://www.keleyi.com/a/bjac/e9e40a974de5a902.htm
Here's the complete code, saved to an HTML file to see the effect.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>jquery-a hidden, reproducible side suspension-cloud-dwelling community </title>
<script type= "Text/javascript" src= "Http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" ></script >
<style type= "Text/css" >
body{margin:0px;}
. onkeleyicom{left:0px;}
. offkeleyicom{left:-140px;}
. showkeleyicom{visibility:visible;}
. Hidekeleyicom{visibility:hidden;}
#xf_keleyi_com {width:166px;height:200px; background-color:transparent;position:fixed;top:200px;}
#jt_keleyi_com {float:right;width:25px;height:25px;margin-top:80px;}
#nr_keleyi_com {float:left;height:100%;width:136px;background-color:silver;}
</style>
<body>
<div style= "Background-color: #959822; width:100%;height:150px; " > can scroll the mouse down the page </div>
<div style= "Background-color:green; width:100%;height:150px; " >www.keleyi.com</div>
<div style= "background-color:red; width:100%;height:150px; " > Please move the cursor over the arrow </div>
<div style= "Background-color:yellow; width:100%;height:150px; " >hi</div>
<div style= "Background-color:silver; width:100%;height:150px; " > Collayi </div>
<div style= "Background-color:aqua; width:100%;height:150px; " >keleyi.com</div>
<div style= "Background-color:fuchsia; width:100%;height:150px; " >keleyi</div>
<div style= "Background-color:green; width:100%;height:150px; " >keleyi.com</div>
<div style= "Background-color:blue; width:100%;height:150px; " > Collayi </div>
<div style= "background-color:olive; width:100%;height:150px; " > Collayi jquery Implementation can hide the side of the hover layer </div>
<div style= "Background-color:green; width:100%;height:150px; " >A</div>
<div style= "background-color:purple; width:100%;height:150px; " >jquery</div>
<div style= "Background-color:green; width:100%;height:150px; " ><a href= "http://www.keleyi.com/a/bjac/cdbc89174171ebb8.htm" target= "_blank" > Original </a></div>
<div style= "Background-color:lime; width:100%;height:150px; " >keleyi.com</div>
<div style= "Background-color:orange; width:100%;height:150px; " ><a href= "http://www.keleyi.com/menu/jquery/" target= "_blank" >jQuery</a> complete code </div>
<div class= "offkeleyicom" id= "xf_keleyi_com" >
<div id= "Nr_keleyi_com" > here is Content <br/>www.keleyi.com
<ul>
<li><a href= "http://www.keleyi.com/menu/net/" target= "_blank" >.NET</a>
</li>
<li><a href= "http://www.keleyi.com/menu/javascript/" target= "_blank" >Javascript</a>
</li>
<li><a href= "http://www.keleyi.com/menu/jquery/" target= "_blank" >jQuery</a>
</li>
<li><a href= "http://www.keleyi.com/menu/csharp/" target= "_blank" >C#</a>
</li>
<li><a href= "http://www.keleyi.com/menu/other/" target= "_blank" > Other </a>
</li>
</ul>
<br/>
</div>
<div id= "jt_keleyi_com" ></div>
</div>
<script type= "Text/javascript" >
$ (document). Ready (
function () {
$ (' #jt_keleyi_com '). Bind (' MouseOver ', function () {
$ (' #xf_keleyi_com '). Removeclass ("offkeleyicom");
$ (' #xf_keleyi_com '). addclass ("onkeleyicom");
$ (' #jt_keleyi_com '). addclass ("hidekeleyicom");
$ (' #jt_keleyi_com '). Removeclass ("showkeleyicom");
})
$ (' #nr_keleyi_com '). Bind (' MouseLeave ', function () {
$ (' #xf_keleyi_com '). Removeclass ("onkeleyicom");
$ (' #xf_keleyi_com '). addclass ("offkeleyicom");
$ (' #jt_keleyi_com '). Removeclass ("hidekeleyicom");
$ (' #jt_keleyi_com '). addclass ("showkeleyicom");
})
})
</script>
</body>
