用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写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
CSS 伪元素::marker详解
Jun 26 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实现的在线人员函数库
2008/04/09 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
浅谈React中组件间抽象
2018/01/27 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
Python程序退出方式小结
2017/12/09 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
迪拜航空官方网站:flydubai
2017/04/20 全球购物
求职自荐信
2013/12/14 职场文书
四好少年事迹材料
2014/01/12 职场文书
2014年清明节寄语
2014/04/03 职场文书
市场营销工作计划书
2014/09/15 职场文书
期末考试复习计划
2015/01/19 职场文书
实习生个人总结范文
2015/02/28 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android