用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 相关文章推荐
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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取整的几种方式
2013/06/25 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
webpack多页面开发实践
2017/12/18 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
详细解析Python中的变量的数据类型
2015/05/13 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Python如何使用函数做字典的值
2019/11/30 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
授权委托书怎么写
2014/04/03 职场文书
师德师风建设方案
2014/05/08 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
八年级英语教学反思
2016/02/15 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书