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 相关文章推荐
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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
ajax缓存问题解决途径
2006/12/06 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
Python计算已经过去多少个周末的方法
2015/07/25 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python实现多线程端口扫描
2019/08/31 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
公司捐款倡议书
2014/05/14 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
置业顾问岗位职责
2015/02/09 职场文书
《实心球》教学反思
2016/02/23 职场文书
Python使用openpyxl模块处理Excel文件
2022/06/05 Python
JS实现九宫格拼图游戏
2022/06/28 Javascript