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 相关文章推荐
Javascript 学习书 推荐
Jun 13 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 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
下载文件的点击数回填
2006/10/09 PHP
php 删除cookie和浏览器重定向
2009/03/16 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
英国鞋网:Rubber Sole
2020/03/03 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
JAVA代码查错题
2014/10/10 面试题
农业开发项目建议书
2014/05/16 职场文书
公共场所禁烟标语
2014/06/25 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
新员工入职感言范文!
2019/07/04 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
python高温预警数据获取实例
2022/07/23 Python