So erzielen Sie mit CSS3 den Effekt, dass das aktuelle Licht und andere grau werden, wenn die Maus hinein bewegt wird-CSS-Tutorial-php.cn

So erzielen Sie mit CSS3 den Effekt, dass das aktuelle Licht und andere grau werden, wenn die Maus hinein bewegt wird

不言

Freigeben： 2018-06-21 16:09:45

Original

1534 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von CSS3 vorgestellt, um den Effekt zu erzielen, dass das aktuelle Licht eingeschaltet und das andere ausgegraut wird, wenn die Maus hineinbewegt wird. Freunde, die es benötigen, können darauf verweisen

<!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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden Sie CSS3 und jQuery, um Textbewegungen nach oben und unten zu realisieren, wenn Sie der Maus folgen

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS3 den Effekt, dass das aktuelle Licht und andere grau werden, wenn die Maus hinein bewegt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!