脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery鼠标经过时高亮同时其他同级元素变暗

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

 更新时间：2016年09月18日 09:35:10   作者：lflianglan  
这篇文章主要介绍了jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果,涉及jQuery基于事件响应机制的页面元素遍历与属性变换操作技巧,需要的朋友可以参考下

本文实例讲述了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切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

相关文章

  • jQuery基于$.ajax设置移动端click超时处理方法

    jQuery基于$.ajax设置移动端click超时处理方法

    这篇文章主要介绍了jQuery基于$.ajax设置移动端click超时处理方法,分析了click事件与touchstart事件的原理与处理技巧,需要的朋友可以参考下
    2016-05-05
  • jQuery源码解读之removeClass()方法分析

    jQuery源码解读之removeClass()方法分析

    这篇文章主要介绍了jQuery源码解读之removeClass()方法,以注释形式较为详细的分析了removeClass()方法的实现技巧与使用注意事项,需要的朋友可以参考下
    2015-02-02
  • jQuery实现表格的数据拖拽

    jQuery实现表格的数据拖拽

    这篇文章主要为大家详细介绍了jQuery实现表格的数据拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • jquery复选框CHECKBOX全选、反选

    jquery复选框CHECKBOX全选、反选

    在JQUERY官方站点看到了另一个方法.更加简单,给大家分享出来: 官方给的函数名为CheckboxGroup;顾名思义就是选取一组CHECKBOX.最新版是在6月18号发布的:
    2008-08-08
  • jQuery实现的简单拖拽功能示例

    jQuery实现的简单拖拽功能示例

    这篇文章主要介绍了jQuery实现的简单拖拽功能,结合实例形式分析了jQuery鼠标事件响应及页面元素动态修改相关技巧,需要的朋友可以参考下
    2016-09-09
  • jquery事件的ready()方法使用详解

    jquery事件的ready()方法使用详解

    本文给大家详细介绍了jquery事件的ready()方法使用方法，以及jQuery中ready与load事件的区别，非常的详尽，有需要的小伙伴可以参考下。
    2015-11-11
  • jQuery实现移动端手机商城购物车功能

    jQuery实现移动端手机商城购物车功能

    这篇文章主要介绍了jQuery实现移动端手机商城购物车功能的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-09-09
  • 深入探秘jquery瀑布流的实现

    深入探秘jquery瀑布流的实现

    瀑布流就是像瀑布一样的网站——丰富的网站内容，特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest、美丽说、蘑菇街这类型的网站。
    2016-01-01
  • 使用jQuery实现dropdownlist的联动效果(sharepoint 2007)

    使用jQuery实现dropdownlist的联动效果(sharepoint 2007)

    在sharepoint 2007网站中，使用jQuery实现dropdownlist的联动效果.
    2011-03-03
  • jQuery Datatable 多个查询条件自定义提交事件(推荐)

    jQuery Datatable 多个查询条件自定义提交事件(推荐)

    这篇文章主要介绍了jQuery Datatable 多个查询条件自定义提交事件的相关资料,需要的朋友可以参考下
    2017-08-08

最新评论