用css3实现当鼠标移进去时当前亮其他变灰效果


Posted in HTML / CSS onApril 08, 2014

复制代码
代码如下:

<!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>
<div 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>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 #HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 #HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 #HTML / CSS
使用css3制作登录表单的步骤
Apr 07 #HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 #HTML / CSS
CSS3网格的三个新特性详解
Apr 04 #HTML / CSS
CSS类名支持中文命名的示例
Apr 04 #HTML / CSS
You might like
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python实现字符串和日期相互转换的方法
2015/05/13 Python
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
开会迟到检讨书
2014/02/03 职场文书
办公室主任职责范本
2014/03/07 职场文书
警示教育活动总结
2014/05/05 职场文书
政府采购方案
2014/06/12 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python