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 相关文章推荐
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 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笔记之:文章中图片处理的使用
2013/04/26 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
python根据日期返回星期几的方法
2015/07/06 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python实现定时提取实时日志程序
2018/06/22 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
班级聚会策划书
2014/01/16 职场文书
小学生作文评语
2014/04/18 职场文书
个人委托书范本汇总
2014/10/01 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
成本会计岗位职责
2015/02/03 职场文书
教师辞职信范文
2015/02/28 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android