jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果


Posted in Javascript onSeptember 18, 2016

本文实例讲述了jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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实现鼠标经过时高亮,同时其他同级元素变暗的效果

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS array 数组详解
Mar 22 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
简单实现jquery焦点图
Dec 12 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
JavaScript每天必学之事件
Sep 18 #Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 #Javascript
js完整倒计时代码分享
Sep 18 #Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 #Javascript
js手动播放图片实现图片轮播效果
Sep 17 #Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 #Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 #Javascript
You might like
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
python简单实现基数排序算法
2015/05/16 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
Django models.py应用实现过程详解
2019/07/29 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
银行办理业务介绍信
2014/01/18 职场文书
家长对小学生的评语
2014/01/28 职场文书
班主任班级寄语大全
2014/04/04 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015元旦节寄语
2014/12/08 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android