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 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
图解JavaScript中的this关键字
May 28 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
解决vuecli3中img src 的引入问题
Aug 04 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
PHP Stream_*系列函数
2010/08/01 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
PHP图片上传代码
2013/11/04 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
Django 返回json数据的实现示例
2020/03/05 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
求职个人评价范文
2014/04/09 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
红楼梦读书笔记
2015/06/25 职场文书
公司周年庆典致辞
2015/07/30 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书