Esempio di jQuery per evidenziare l'elemento durante il passaggio del mouse e oscurare altri elementi dello stesso livello

Questa esempio spiega come jQuery realizza l'effetto di evidenziare con il mouse e oscurare gli altri elementi同级. Condiviso con tutti per riferimento, come segue:

!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="parola1, parola2, parola3 ecc.\"/>
    <title>Con il mouse sopra, evidenziare, gli altri oscuri</title>
    <style type="text\/css">
      *{margine:0; riempimento:0;}
      ul,li{lista:nessuna;}
      ul{larghezza:900px; altezza:200px; margine:100px auto;}
      li{larghezza:200px; altezza:200px; display:inline-block; border:1px solid #d8d8d8; posizione:relativa;}
      .addblack{larghezza:200px; altezza:200px; display:none; sfondo:#000;filter: alpha(opacit\(a=10\));-moz-opacity: 0.1; opacit\(a: 0.1\); posizione:assoluta; sinistra:0; alto:0;}
    </style>
    <script type="text\/javascript" src="jquery-1.7.2.min.js">
    <script type="text\/javascript">
      $\(document\).$\{ready\(function\(\)\{\}
         $\(\"\.index_Img\"\).$\{hover\(function\(\)\{\}
           $\(this)\.$\{\sibling\(\)\}\.$\{find\(\"\.addblack\"\)\}\.$\{show\(\)\};
           },function(){}
             $(this).siblings().find(".addblack").hide();
             $(this).find(".addblack").hide();
         }
      }
    </script>
  </head>
  <body>
    <ul>
      <li class="index_Img">
        Mela
        <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">
        Ananas
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
    </ul>
  </body>
</html>

L'immagine di esecuzione è come segue:

Per coloro che sono interessati a ulteriori contenuti jQuery, possono consultare le nostre sezioni speciali: 'Riassunto delle tecniche e degli effetti di commutazione jQuery', 'Riassunto delle tecniche e degli algoritmi di percorso jQuery', 'Riassunto delle tecniche di estensione jQuery', 'Riassunto delle tecniche e dell'uso degli plugin jQuery', 'Riassunto delle tecniche e degli effetti di trascinamento jQuery', 'Riassunto delle tecniche di manipolazione delle tabelle (table) jQuery', 'Riassunto dell'uso di Ajax in jQuery', 'Riassunto degli effetti classici comuni jQuery', 'Riassunto dell'uso di animazioni e effetti jQuery' e 'Riassunto delle tecniche di selezione degli elementi jQuery'.

Spero che il contenuto di questo articolo possa essere utile per la programmazione jQuery di tutti.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il diritto d'autore è di proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.

Corso di base