cambia colore al passaggio del mouse!

09-12-2010, 19.43.40

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

**dreadnaut** · 09-12-2010, 19.53.04

prova a guardare questa guida:

http://www.ssi-developer.net/css/men...r-effect.shtml

**karl94** · 09-12-2010, 19.57.16

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>

09-12-2010, 20.01.25

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?

**karl94** · 09-12-2010, 20.04.52

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

10-12-2010, 16.21.42

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

**karl94** · 11-12-2010, 16.42.35

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

11-12-2010, 17.08.48

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?

**karl94** · 11-12-2010, 17.14.34

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?

11-12-2010, 18.49.33

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!

**karl94** · 12-12-2010, 23.54.24

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.

13-12-2010, 12.34.55

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

**dreadnaut** · 13-12-2010, 12.39.49

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.

13-12-2010, 12.41.38

grazie infinite =)

Discussione: cambia colore al passaggio del mouse!

LinkBack

Strumenti discussione

Display

cambia colore al passaggio del mouse!

Regole di scrittura