Implementação do efeito de realçamento ao passar o mouse e escurecimento dos elementos同级 no 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">
        Maçã
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        Banana
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        Uva
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        Abacaxi
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
    </ul>
  </body>
</html>

A imagem de execução é como follows:

Leitores interessados em mais conteúdo sobre jQuery podem consultar as seções especiais deste site: 'Resumo de Efeitos e Técnicas de Alternância do jQuery', 'Resumo de Algoritmos e Técnicas de Percurso do jQuery', 'Resumo de Técnicas de Extensão do jQuery', 'Resumo de Plugins e Usos Comuns do jQuery', 'Resumo de Efeitos e Técnicas de Arrastar e Soltar do jQuery', 'Resumo de Técnicas de Manipulação de Tabela (table) do jQuery', 'Resumo de Usos do Ajax no jQuery', 'Resumo de Efeitos e Técnicas Clássicos do jQuery', 'Resumo de Usos de Animação e Efeito do jQuery' e 'Resumo de Usos do Seletor do jQuery'.

Espero que o conteúdo deste artigo ajude a todos a programar com jQuery.

Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao respectivo detentor dos direitos autorais, foi contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Se confirmado, o site deletará imediatamente o conteúdo suspeito de infringência.

Tutorial Básico