初始代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wb="http://open.weibo.com/wb"><head>

       <title></title>

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

       <script type="text/javascript">

           $(function () {

               $("div").hover(

         function (oEvent) {

             $("div").css("opacity", "0.45");

             //第一个函数相当于mouseover事件监听

             $(oEvent.target).css("opacity", "0");

         },

         function (oEvent) {

             //第二个函数相当于mouseout事件监听

             $("div").css("opacity", "0");

         }

     );

           });

 </script>

 <style type="text/css">

 .float-panel{width:980px;}

 .float-panel li a img {

 float: left;

 }

 .mask-layer {

 background: #000;

 filter: alpha(opacity=0);

 opacity: 0;

 cursor: pointer;

 position: absolute;

 left: 0;

 top: 0;

 width: 100%;

 height: 100%;

 transition: opacity .2s linear;

 -webkit-transition: opacity .2s linear;

 -moz-transition: opacity .2s linear;

 }

 .float-panel li a {

 position: relative;

 display: block;

 zoom: 1;

 overflow: hidden;

 }

 li{float:left;list-style:none;}

 </style>

 </head>

 <body>

 <ul class="float-panel" >

     <li>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B1.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

     </li>

     <li>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B2.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

          </a>

     </li>

     <li>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B3.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

     </li>

     <li>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B4.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

     </li>

     <li>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B5.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

     </li>

 </ul>

 </body></html>

简易代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wb="http://open.weibo.com/wb"><head>

       <title></title>

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

       <script type="text/javascript">

           $(function () {

               $(".float-panel div").hover(

         function (oEvent) {

             $(".float-panel div").css("opacity", "0.45");

             //第一个函数相当于mouseover事件监听

             $(oEvent.target).css("opacity", "0");

         },

         function (oEvent) {

             //第二个函数相当于mouseout事件监听

             $(".float-panel div").css("opacity", "0");

         }

     );

 });

 </script>

 <style type="text/css">

 .float-panel{width:980px;}

 .mask-layer{

 background: #000;

 filter: alpha(opacity=0);

 opacity: 0;

 cursor: pointer;

 position: absolute;

 left: 0;

 top: 0;

 width: 100%;

 height: 100%;

 transition: opacity .2s linear;

 -webkit-transition: opacity .2s linear;

 -moz-transition: opacity .2s linear;

 }

 .float-panel a {

 position: relative;

 display: block;

 zoom: 1;

 overflow: hidden;

 float:left;

 }

 </style>

 </head>

 <body>

 <div class="float-panel" >

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B1.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B2.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

          </a>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B3.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B4.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B5.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

 </div>

 </body></html>

鼠标经过的图片高亮显示，其余变暗效果[xyytit]的更多相关文章

  1. JS实现 鼠标放上去 图片自动放大的效果

    前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...

  2. 杠杠做的全屏随鼠标滚动显示图片，类似于PPT效果

    图片有22张,是一张张加载的,耐心点,鼠标一直尝试向下滚就行了. 图片来自<天空之境:乌尤尼盐沼>,一个好美好美的地方 引个流,欢迎去我的博客看看:http://blog.cxycs.co ...

  3. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  4. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  5. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  6. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  7. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  8. jQuery实现鼠标经过图片预览大图效果

    jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScrip ...

  9. Android:通过滤镜实现点击图片变暗效果

    实现点击图片(ImageView)变暗效果,有一个较简单的方法,就是讲目标图片设置为背景图片(setBackground),再创建一个selector.xml文件,里面放置一张普通状态时的透明图片,一 ...

随机推荐

  1. position和margin的绝对定位和相对定位

    电脑桌面清理干净之后,果然快了很多,桌面上的东西会占用内存,导致电脑变慢,以前我看到表姐的电脑桌面堆满了东西,我就在心里默默的鄙视不懂玩电脑的人,现在我竟然也养成了这种坏毛病..保存东西的时候放在桌面 ...

  2. 1050 String Subtraction （20 分）

    1050 String Subtraction (20 分) Given two strings S​1​​ and S​2​​, S=S​1​​−S​2​​ is defined to be the ...

  3. 6.27-JSTL、标签、分页

    一.JSTL 条件标签: <c:if> if if(){ }else if(){ }else{ } <c:choose> <c:when></c:when&g ...

  4. Ubuntu16.04或18.04上安装QQ微信迅雷

    0. 写在前面 没办法,公司的电脑是Windows的,windows下面开发实在太恶心人,并且开发中需要编译golang和C++的程序,于是开始了Linux的折腾之路. 如果你只是想用Linux环境开 ...

  5. python函数入门

    知识内容: 1.函数的作用 2.函数的定义与调用 3.函数的返回值 4.函数的参数 5.局部变量与全局变量 6.作用域 一.函数的作用 1.复用代码 将可能重复执行的代码封装成函数,并在需要执行的地方 ...

  6. 4. 纯 CSS 创作一个金属光泽 3D 按钮特效

    原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class="box">BUTTON< ...

  7. shiro 注解式前提

    <aop:config proxy-target-class="true"></aop:config> <bean class="org.a ...

  8. spring Cloud 定时任务 @Scheduled

    本文主要记录:如何使用spring的@Scheduled注解实现定时作业,基于spring cloud 1)pom.xml 文件引入相关依赖.spring-maven插件 <?xml versi ...

  9. Spring MVC 异常处理 - ExceptionHandler

    通过HandlerExceptionResolver 处理程序异常,包括Handler映射, 数据绑定, 以及目标方法执行时的发生的异常 实现类如下 /** * 1. 在 @ExceptionHand ...

  10. libcur+openssl的编译，使之支持SSL<转>

    本机环境: Visual Studio 2010 . Windows 7 64 bit 1: 下载文件 1.1 libcurl: curl-7.49.1.zip 地址: https://curl.ha ...