怎么用css3实现当鼠标移进去时当前亮其他变灰效果-创新互联
这篇文章主要介绍“怎么用css3实现当鼠标移进去时当前亮其他变灰效果”，在日常操作中，相信很多人在怎么用css3实现当鼠标移进去时当前亮其他变灰效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用css3实现当鼠标移进去时当前亮其他变灰效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
创新互联专注为客户提供全方位的互联网综合服务，包含不限于
成都做网站、成都网站建设、温县网络推广、
微信小程序开发、温县网络营销、温县企业策划、温县品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；创新互联为所有大学生创业者提供
温县建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com
代码如下:
用css3实现鼠标移进去当前亮其他变灰
*{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("/tupian/20230522/o_delicious.png"); }
.digg { background-image:url("/tupian/20230522/o_digg.png"); }
.facebook { background-image:url("/tupian/20230522/o_facebook.png"); }
.flickr { background-image:url("/tupian/20230522/o_digg.png"); }
.linkedin { background-image:url("/tupian/20230522/o_flickr.png"); }
.box a{display: block;}
Delicious
Digg
Facebook
Flickr
LinkedIn
到此，关于“怎么用css3实现当鼠标移进去时当前亮其他变灰效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
分享名称：怎么用css3实现当鼠标移进去时当前亮其他变灰效果-创新互联
转载源于：
http://cxhlcq.com/article/degcpd.html
重庆分公司
重庆分公司
