Home > Article > Web Front-end > How to use css3 to achieve the effect of making the current light and others gray when the mouse is moved in

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

不言Original: 2018-06-21 16:09:451537browse

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>

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!

Statement：

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

Previous article：CSS breadcrumb navigation barNext article：CSS breadcrumb navigation bar

See more

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

Related articles