用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实现预加载动画效果
Sep 06 HTML / CSS
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
html5启动原生APP总结
Jul 03 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 setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
自我评价的范文
2014/02/02 职场文书
《观舞记》教学反思
2014/04/16 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
SQLServer之常用函数总结详解
2021/08/30 SQL Server
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android