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>
  • 相关阅读:
    爬取药智网中的方剂信息
    日报3.13
    数据库添加出错
    Bencode
    一些安全网络协议
    代码质量不重要
    Jordan Peterson
    随身记录的缺点
    Why is Go PANICking?
    go问
  • 原文地址:https://www.cnblogs.com/sjqq/p/6361489.html
Copyright © 2011-2022 走看看