<!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>

demo:http://jsfiddle.net/9SuUy/

用css3实现鼠标移进去当前亮其他变灰的更多相关文章

  1. CSS3实现鼠标移动到图片上图片变大

    CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...

  2. CSS3 动画-- 鼠标移上去，div 会旋转、放大、移动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

    转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

  4. HTML5视频播放练习：鼠标经过视频播放，鼠标移除停止播放，再次经过继续播放。

    随着HTML5的广泛应用,在一些网站中,经常看到有些预览的短视频预览,鼠标经过就会播放,移除就会停止播放,再次移进去就会继续播放. 自己也研究着做一个比较简单的类似的练习. 视频可以自己到包图网下载, ...

  5. 代码：　CSS3动画，简单示例（鼠标移上去后，背景图片旋转）

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.mi ...

  6. 只要把鼠标移上Div方框，方框就自动顺时针旋转

    这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的 ...

  7. 鼠标移到导航上面 当前的LI变色 处于当前的位置

    鼠标移到导航上面 当前的LI变色 处于当前的位置,广泛应用于当前导航. 点击这里查看效果 以下是源代码: <html> <head> <meta http-equiv=& ...

  8. 在input中实现点点点与当鼠标移上去时显示剩余的字

    项目中经常会遇到这个问题,在一个内容框中,由于框的宽度是固定的,但是里面的内容却有很多,那么这个时候需求里就要求第一,多余的字要以点点点的形式隐藏,第二,当鼠标移上去的时候要以title提示的方式显示 ...

  9. WPF中当鼠标移到按钮上时，按钮的背景图片消失的问题

    如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...

随机推荐

  1. Qt 与 JavaScript 通信

    使用QWebView加载网页后,解决Qt与JavaScript通信的问题: The QtWebKit Bridge :http://qt-project.org/doc/qt-4.8/qtwebkit ...

  2. java常见错误云集与注意事项

    1.安装Eclipse时,尽量jdk不要用jre,jdk包含jre j JDK就是Java Development Kit.简单的说JDK是面向开发人员使用的SDK,它提供了Java的开发环境和运行环 ...

  3. 教你Mac OS系统四种改动Hosts文件的方法

    使用Mac OS X系统的用户.在某些时候可能遇到了须要改动系统Hosts文件的情况,那么Mac OS系统怎样改动Hosts文件呢?和Windows系统有何差别呢?我们知道事实上改动Hosts文件仅仅 ...

  4. android中listview的一些样式设置

    在Android中,ListView是最常用的一个控件,在做UI设计的时候,很多人希望能够改变一下它的背景,使他能够符合整体的UI设计,改变背景背很简单只需要准备一张图片然后指定属性 android: ...

  5. how tomcat works 读书笔记四 tomcat的默认连接器

    事实上在第三章,就已经有了连接器的样子了,只是那仅仅是一个学习工具,在这一章我们会開始分析tomcat4里面的默认连接器. 连接器 Tomcat连接器必须满足下面几个要求 1 实现org.apache ...

  6. limit-进程句柄限制

    在Linux下面部署应用的时候,有时候会遇上Socket/File: Can’t open so many files的问题,比如还有Squid做代理,当文件打开数到900多时速能就非常快的下降,有可 ...

  7. cocoaPods下载使用记录

    cocoaPods下载使用记录 参考地址: 如何在Mac OS 上安装运行Ruby运行环境 http://www.cnblogs.com/daguo/p/4097263.html cocoaPods安 ...

  8. PHP编译安装出错configure: error: mcrypt.h not found. Please reinstall libmcrypt的解决办法

    1.下载libmcrypt wget http://jaist.dl.sourceforge.net/project/mcrypt/Libmcrypt/2.5.8/libmcrypt-2.5.8.ta ...

  9. POJ - 3608 Bridge Across Islands【旋转卡壳】及一些有趣现象

    给两个凸包,求这两个凸包间最短距离 旋转卡壳的基础题 因为是初学旋转卡壳,所以找了别人的代码进行观摩..然而发现很有意思的现象 比如说这个代码(只截取了关键部分) double solve(Point ...

  10. webfont自定义字体的实现方案

    对于做Web前端的人来说,现在不知道webfont为何物似乎显得有点low了.webfont固然可爱,但似乎仍只可远观,不可亵玩.原因就在于中文字体库体积庞大,远比26个字母来的复杂.于是有同学就说了 ...