cambia colore al passaggio del mouse!

Ragazzi osservando il sito della ubisoft ho visto una bella cosa, non riesco a spiegarma quidi ve la faccio vedere.

andate quà
http://www.ubi.com/

in basso a destra c'è la voce "NUOVE USCITE"

e sotto ci sono

* Assassin's Creed Brotherhood
* Michael Jackson The Experience
* YOUR SHAPE™: Fitness Evolved
* Just Dance 2INFORMAZIONI
* Rabbids Travel in Time

Se passate con il mause su queste scritte vedrete che cambiano colore, ma non la scritta ma tutto il riquadro! come faccio a farlo idendico nel mio sito web?

mi potete passare il codice HTML o javascript?

Grazie

prova a guardare questa guida:
:arrow: http://www.ssi-developer.net/css/men...r-effect.shtml

Non è né HTML né javascript: per ottenere quell'effetto è sufficiente il CSS, o meglio la pseudo-classe hover che permette di impostare determinate proprietà ad un elemento quando il mouse vi è sopra.
Per esempio:

Codice HTML:

---

<ul class="effect">
        <li>Elemento №1</li>
        <li>Elemento №2</li>
        <li>Elemento №3</li>
        <li>Elemento №4</li>
        <li>Elemento №5</li>
</ul>

---

Codice HTML:

---

<style type="text/css">
        .effect > li{
                display: block;
                background: #FFF;
                color: #000;
        }
       
        .effect > li:hover{
                background: #000;
                color: #FFF;
        }
</style>

---

Citazione:

---

Originalmente inviato da karl94

Non è né HTML né javascript: per ottenere quell'effetto è sufficiente il CSS, o meglio la pseudo-classe hover che permette di impostare determinate proprietà ad un elemento quando il mouse vi è sopra.
Per esempio:

Codice HTML:

---

<ul class="effect">
        <li>Elemento №1</li>
        <li>Elemento №2</li>
        <li>Elemento №3</li>
        <li>Elemento №4</li>
        <li>Elemento №5</li>
</ul>

---

Codice HTML:

---

<style type="text/css">
        .effect > li{
                display: block;
                background: #FFF;
                color: #000;
        }
       
        .effect > li:hover{
                background: #000;
                color: #FFF;
        }
</style>

---

---

Grazie ma se io vorrei mettere per esempeio:

Siti Associati

mause(con link di destinazione)
computer((con link di destinazione)
ecc

con lo stesso identico effetto come devo fare?

Prova a seguire la guida che ti ha consigliato dreadnaut, poi se hai problemi chiedi qui.

Ragazzi mi blocco quà vorrei che quando passo con lause tutto il quadrato si illumina di azzurro

ma ci sono 2 problemi non riesco a creare il quadrato e non si illumina di niente al passaggio..

cosa sbaglio?

Codice:

---

<div id="list-menu"
list-menu a:link
list-menu a:active
list-menu a:visited
color: #000000{
width: 132px;
/* this width value is also effected by
the padding we will later set on the links. */

margin: 0;
padding: 0;
margin: 2px 0 0;
display: block;
width:120px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;

background: #dcdcdc;
hover {
border: 1px solid #000000;
background: #333333;
color: #ffffff;

text-decoration: none; /*lets remove the link underlines*/
list-style-type: none;}>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Youtube</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Contattaci</a></li>
</ul>

---

ho seguito questa guida http://www.ssi-developer.net/css/men...r-effect.shtml

Se descrivi nei minimi dettagli ciò che vuoi ottenere, posso farti il menù.

Citazione:

---

Originalmente inviato da karl94

Se descrivi nei minimi dettagli ciò che vuoi ottenere, posso farti il menù.

---

andate quà
http://www.ubi.com/

in basso a destra c'è la voce "NUOVE USCITE"

e sotto ci sono

* Assassin's Creed Brotherhood
* Michael Jackson The Experience
* YOUR SHAPE™: Fitness Evolved
* Just Dance 2INFORMAZIONI
* Rabbids Travel in Time

Se passate con il mause su queste scritte vedrete che cambiano colore, ma non la scritta ma tutto il riquadro! come faccio a farlo idendico nel mio sito web?

Con minimi dettagli intendo tutto: colore di sfondo normale, colore di sfondo con il mouse sopra, spessore del bordo, stile del bordo, colore del bordo, font, grandezza font, altezza, larghezza, spaziature (margini e padding), colore del testo, allineamento. Vuoi i bordi arrotondati? Dove? Vuoi che il colore cambi di botto o che ci sia una animazione? Quali sono gli elementi che vuoi mettere?

Citazione:

---

Originalmente inviato da karl94

Con minimi dettagli intendo tutto: colore di sfondo normale, colore di sfondo con il mouse sopra, spessore del bordo, stile del bordo, colore del bordo, font, grandezza font, altezza, larghezza, spaziature (margini e padding), colore del testo, allineamento. Vuoi i bordi arrotondati? Dove? Vuoi che il colore cambi di botto o che ci sia una animazione? Quali sono gli elementi che vuoi mettere?

---

allora, lo voglio identico a questo preciso in ogni dettaglio, UGUALE UGUALE, colori grandezza colore carattere, colore che cambia quando gli passi il mause, TUTTO

deve venire IDENTICO A QUESTO

quando gli passo il mause si deve illuminare tutto di celeste proprio come questo:

http://img526.imageshack.us/img526/7465/lolpb.png

Invede di "NUOVE USCITE"--->Altri
Opzioni:
Contattaci
Vota il sito

GRAZIE!

Ecco qui il CSS:

Codice:

---

        #hover_menù>ul>li{
                display: block;
                border-top: 1px #E2E2E2 solid;
        }
       
        #hover_menù>ul>li:first-of-type{
                border-top: 0;
        }
       
        #hover_menù>h3{
                text-transform: uppercase;
                color: #FFF;
                background: #000;
                line-height: 22px;
                font-size: 11px;
                text-shadow: 0 0 3px #000;
                background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0.125) 80%);
                background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgba(255, 255, 255, 0.25)), color-stop(0.8, rgba(255, 255, 255, 0.125)));
        }
       
        #hover_menù>ul{
                margin: 0;
                padding: 0;
                border: 1px #AAA solid;
                border-top: 0;
        }
       
        #hover_menù>h3, #hover_menù>ul>li>:link, #hover_menù>ul>li>:visited{
                margin: 0;
                padding: 0 10px;
                display: block;
        }
       
        #hover_menù>ul>li>:link, #hover_menù>ul>li>:visited{
                line-height: 20px;
                text-decoration: none;
                color: #707070;
        }
       
        #hover_menù>ul>li>:link:hover, #hover_menù>ul>li>:visited:hover{
                color: #FFF;
                background-color: rgb(106, 153, 205);
                background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16));
                background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.16)));
        }
       
        #hover_menù{
                width: 470px;
                font: bold 10px Arial, Verdana;
                background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.08) 0px, rgba(0, 0, 0, 0) 52px);
                background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.08)), to(rgba(0, 0, 0, 0)));
                -webkit-background-size: 100% 52px;
                background-position: bottom;
                background-repeat: no-repeat;
        }

---

Ed il codice HTML del menù:

Codice HTML:

---

<div id="hover_menù">
        <h3>Altri</h3>
        <ul>
                <li><a href="#">Opzioni</a></li>
                <li><a href="#">Contattaci</a></li>
                <li><a href="#">Vota il sito</a></li>
        </ul>
</div>

---

Io ho messo un H3, cambialo a seconda della struttura della pagina.

domanda.. a cosa serve il simbolo ">" nel css?

E' un selettore usato per limitare la regola ai nodi che sono figli diretti di un altro elemento. Ad esempio:

Codice:

---

#roba UL { ... }

---

prenderebbe tutte le liste in #roba, annidate a qualsiasi livello;

Codice:

---

#roba > UL { ... }

---

si applica invece solo alle liste che sono figli diretti di #roba, perciò solo quelle di primo livello (a meno che non ci siano altri elementi di mezzo)

Per saperne di più, un utile articolo sui selettori.

grazie infinite =)