<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="keywords" content="关键词1，关键词2，关键词3等等"/>
    <title>鼠标经过时高亮，其他的暗</title>
    <style type="text/css">
      *{margin:0; padding:0;}
      ul,li{list-style:none;}
      ul{width:900px; height:200px; margin:100px auto;}
      li{width:200px; height:200px; display:inline-block; border:1px solid #d8d8d8; position:relative;}
      .addblack{width:200px; height:200px; display:none; background:#000;filter: alpha(opacity=10);-moz-opacity: 0.1; opacity: 0.1; position:absolute; left:0; top:0;}
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $(".index_Img").hover(function(){
           $(this).siblings().find(".addblack").show();
           },function(){
             $(this).siblings().find(".addblack").hide();
             $(this).find(".addblack").hide();
         })
      })
    </script>
  </head>
  <body>
    <ul>
      <li class="index_Img">
        苹果
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        香蕉
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        葡萄
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        凤梨
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
    </ul>
  </body>
</html>

jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果的更多相关文章

  1. jQuery的鼠标悬停时放大图片的效果

    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...

  2. 基于jQuery的鼠标悬停时放大图片的效果制作

    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...

  3. Jquery hover鼠标经过时弹出div动态提示语

    一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...

  4. jquery.datetimepicker.js 当鼠标离开时，不选中当前时间，以达到清空的目的

    validateOnBlur:true    当鼠标离开时,不选中当前时间,以达到清空的目的 使用方法:   // 时间设置         $('#BankProduct_sale_begin'). ...

  5. JQuery 实现鼠标经过图片高亮显示，其余图片变暗

    效果图: 当鼠标经过图片时,其余图片变暗,来高亮显示当前图片,主要用的是对比度.当然你也可以先把其他图片默认变暗,鼠标经过时高亮显示,不过,无鼠标经过时整体图片都会是偏暗色调. 效果可以通过 三步实现 ...

  6. jquery实现鼠标焦点十字效果

    系统开发时很多地方需要有焦点效果,例如:鼠标点击聚焦,地图定位,在图片上突出显示,焦点定位页面元素. 本小功能通过jquery和graphics二次开发,实现通过鼠标点击页面任何区域,聚焦当前点击位置 ...

  7. jQuery的鼠标事件总结

    jQuery的鼠标事件总结 1.click()事件. 2.dbclick()鼠标双击事件 3.mousedown()鼠标按下事件 4.mouseup()鼠标松开事件 5.mouseover()从一个元 ...

  8. JS/jquery实现鼠标控制页面元素显隐

    最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...

  9. 在循环中使用鼠标悬停时表示当前悬停选中,传入this关键字即可

    在前端循环中使用鼠标悬停事件 <div class="message-widget contact-widget"> <!-- Message --> {% ...

随机推荐

  1. Amoeba软件实现mysql读写分离

    一般不用,大公司都是自己程序实现的. 安装amoeba

  2. Linux 监控分析

    一.硬件基础 Cpu   逻辑的处理.计算.判断 现代分时多任务操作系统对 CPU 都是分时间片使用的:比如A进程占用10ms,然后B进程占用30ms,然后空闲60ms, 再又是A进程占10ms,B进 ...

  3. 在windows环境下编译hadoop

    1.环境准备 1.1 JDK的安装 下载jdk1.6.0_43(这里务必要使用jdk的1.6版本,因为使用JDK1.7版本编译hadoop的时候,很多Maven依赖下载不完整,最终会报错)解压到,并将 ...

  4. 1326: The contest（并查集+分组背包）

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1326 殷犇有很多队员.他们都认为自己是最强的,于是,一场比赛开始了~ 于是安叔主办了一场比赛,比赛 ...

  5. Unity又称Unity Application Block

    本文关注以下方面(环境为VS2012..Net Framework 4.5以及Unity 3): Ioc/DI简介: Unity简单示例 一.Ioc/DI简介 IoC 即 Inversion of C ...

  6. iscsi线缆

  7. Yarn NodeManager restart

    一.介绍默认Yarn NodeManager重启后会断开所有当前正在运行的container的状态,这意味着重启后需要重新启动container进程,该特性的作用就是把NM的状态临时保存到本地,重启后 ...

  8. 用lua实现ByteArray和ByteArrayVarint

    许多 Actionscript 程序员已经从 Flash 转到 Cocos2d-x 了.那么以前的那些超级好用的类库都不见了,只好重新来过. 我利用 Lua 和 lpack 库实现了一套 lua版本的 ...

  9. AI，DM，ML，PR的区别与联系

    数据挖掘和机器学习的区别和联系,周志华有一篇很好的论述<机器学习与数据挖掘>可以帮助大家理解.数据挖掘受到很多学科领域的影响,其中数据库.机器学习.统计学无疑影响最大.简言之,对数据挖掘而 ...

  10. 判断DataTable某字段是否包含某值

    // <summary> /// 判断DataTale中判断某个字段中包含某个数据 /// </summary> /// <param name="dt&quo ...