Heim > Artikel > Web-Frontend > So erzielen Sie mit CSS3 den Effekt, dass das aktuelle Licht und andere grau werden, wenn die Maus hinein bewegt wird
So erzielen Sie mit CSS3 den Effekt, dass das aktuelle Licht und andere grau werden, wenn die Maus hinein bewegt wird
- 不言Original
- 2018-06-21 16:09:451554Durchsuche
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>
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:
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!