zoukankan      html  css  js  c++  java
  • jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <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{900px; height:200px; margin:100px auto;}
          li{200px; height:200px; display:inline-block; border:1px solid #d8d8d8; position:relative;}
          .addblack{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; 200px; height: 200px; display: none;"></div>
          </li>
          <li class="index_Img">
            香蕉
            <div class="addblack" style="left: 0px; top: 0px; 200px; height: 200px; display: none;"></div>
          </li>
          <li class="index_Img">
            葡萄
            <div class="addblack" style="left: 0px; top: 0px; 200px; height: 200px; display: none;"></div>
          </li>
          <li class="index_Img">
            凤梨
            <div class="addblack" style="left: 0px; top: 0px; 200px; height: 200px; display: none;"></div>
          </li>
        </ul>
      </body>
    </html>
  • 相关阅读:
    2nd
    C#连接Sqlite 出现:混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有配置其他信息的情况下,无法在 4.0 运行时中加载该程序集。的解决方案
    后端项目与钉钉接口(第三方)对接要注意的问题
    springboot的第一节课
    - Missing artifact com.jate.fk.base:fk-base-service:jar:1.0.1
    Android框架模式
    函数的定义与调用
    kotlin基础
    观察者模式
    实现单例的六种方式
  • 原文地址:https://www.cnblogs.com/sjqq/p/6361489.html
Copyright © 2011-2022 走看看