编程 Javascript

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实现鼠标经过时高亮,同时其他同级元素变暗的效果

- Author -

lflianglan

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS array 数组详解

Mar 22 Javascript

jQuery之选项卡的简单实现

Feb 28 Javascript

JS判断浏览器是否支持某一个CSS3属性的方法

Oct 17 Javascript

简要了解jQuery移动web开发的响应式布局设计

Dec 04 Javascript

jQuery使用经验小技巧(推荐)

May 31 Javascript

简单实现jquery焦点图

Dec 12 Javascript

使用JS在浏览器中判断当前网络连接状态的几种方法

May 05 Javascript

Angular4学习笔记之实现绑定和分包

Aug 01 Javascript

es6中的解构赋值、扩展运算符和rest参数使用详解

Sep 28 Javascript

JS实现登录页密码的显示和隐藏功能

Dec 06 Javascript

React中常见的动画实现的几种方式

Jan 10 Javascript

原生js实现表格翻页和跳转

Sep 29 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