How to use css3 to achieve the effect of making the current light and others gray when the mouse is moved in

不言
Release: 2018-06-21 16:09:45
Original
1533 people have browsed it

This article mainly introduces the use of css3 to achieve the effect of turning the current light on and the other graying out when the mouse is moved in. Friends who need it can refer to it

<!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>用css3实现鼠标移进去当前亮其他变灰</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;box-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> 
<p 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> 
</p> 
</body> 
</html>
Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For help, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

Use css3 and jQuery to realize text shaking up and down following the mouse

The above is the detailed content of How to use css3 to achieve the effect of making the current light and others gray when the mouse is moved in. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!