Non è difficile usando Jquery, ti ho scritto un esempio che non sarà bello ma funziona.Originariamente inviato da mexican
Mmmm mi sa che ci vuole troppo tempo!!! E poi non si capisce molto bene da li!
Peccato che non ci sia un esempio in rete che fa una cosa simile!
(spero che i moderatori chiudano un occhio perchè questo post andrebbe nel forum del Javascript)
Il javascript è molto semplice: quando si verifica l'evento HOVER su un elemento[*]($('#menu > ul > li').hover) il selettore SIBLINGS seleziona tutti i[*] fratelli e gli applica il metodo FadeTo, che consente un gradevole fading (sfumatura non istantanea ma graduale) impostanto l'opacità degli elementi a 0.3. La seconda parte della funzione consente di far tornare l'opacità di tutti i[*] ad 1.0 quando il mouse se ne va.codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Test</title> </head> <style type="text/css"> <!-- body {background:#000;} #menu ul li {background:#fff;color:#000;float:left;margin: 10px;} --> </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#menu > ul > li').hover( function () { var $this = $(this); $this.siblings().stop().fadeTo(300,0.3); },function () { var $this = $(this); $(this).siblings().stop().fadeTo(300,1); });}); </script> <body> <div id="menu"> <ul>[*]Menu1[*]Menu1[*]Menu1[*]Menu1[*]Menu1[/list] </div> </body> </html>
Spero ti sia utile :-)
Ciao