Using CSS3 to achieve when the mouse moved in the current light of other changes in gray effect
The code is as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<html>
<head>
<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>
<script type= "Text/javascript" src= "Js/prefixfree.min.js" ></script>
<title> use CSS3 to move the mouse into the current light other variable grey </title>
</head>
<style type= "Text/css" >
*{margin:0;padding:0;font-size:12px;}
. wrapper{border:1px #708090 solid;width:900px;margin:100px auto;height:300px;padding:20px;border-radius:8px;b ox-shadow:2px 2px 6px #666, -2px-2px 6px #666;}
Li{list-style:none;}
. Box:hover li{opacity:0.2;}
. box li{float:left;width:48px; height:48px;position:relative; margin-right:10px;
-webkit-transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
-ms-transition:opacity 1s ease-in-out;
-o-transition:opacity 1s ease-in-out;
transition:opacity 1s ease-in-out;
}
. Box li:hover{opacity:1;
box Li A{position:absolute;left:-10px;width:80px;height:30px;top:-30px;color: #fff; font-weight:bold; Background: #000; border-radius:8px;box-shadow:1px 0 2px #fff inset;text-align:center;opacity:0;
-webkit-transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
-ms-transition:opacity 1s ease-in-out;
-o-transition:opacity 1s ease-in-out;
transition:opacity 1s ease-in-out;
}
. box Li:hover a{opacity:1; top:-30px;}
. Delicious {background-image:url ("Http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_delicious.png");}
. Digg {background-image:url ("Http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_digg.png");}
. Facebook {background-image:url ("Http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_facebook.png");}
. Flickr {background-image:url ("Http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_digg.png");}
. LinkedIn {background-image:url ("Http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_flickr.png");}
. Box A{display:block;
</style>
<body>
<div class= "wrapper" >
<ul class= "box" >
<li class= "Delicious" ><a href= "#" >Delicious</a></li>
<li class= "Digg" ><a href= "#" >Digg</a></li>
<li class= "Facebook" ><a href= "#" >Facebook</a></li>
<li class= "Flickr" ><a href= "#" >Flickr</a></li>
<li class= "LinkedIn" ><a href= "#" >LinkedIn</a></li>
</ul>
</div>
</body>
</html>