cambio colore al passaggio del mouse

**jurij7** · 30-04-2011, 22:09

ciao
ho creato una link con una parola e vorrei capire come far per far cambiare alla parola il colore quando passa sopra il mouse.

**0-c00l** · 30-04-2011, 22:29

Se è un link inserisci nel css:

codice:

a:hover {
color: red; /* Colore a caso, metti quello che vuoi */
}

Se è una parola normale potresti mettergli uno span nella tua pagina, ovvero:

codice:

<span style="color: yellow;">PAROLA</span>

**jurij7** · 01-05-2011, 10:51

ho cambiato un pò
nel senso che a questa parola ora è associata anche una immagine.
quindi vorrei che passando il mouse sia sull'immagine (link) che sulla parola (link anch'essa), cambio colore alla parola.

come in questo sito :
http://www.benedikt-partenheimer.com/

come posso fare?

**carlomarangoni** · 01-05-2011, 15:48

Originariamente inviato da jurij7
ho cambiato un pò
nel senso che a questa parola ora è associata anche una immagine.
quindi vorrei che passando il mouse sia sull'immagine (link) che sulla parola (link anch'essa), cambio colore alla parola.

come in questo sito :
http://www.benedikt-partenheimer.com/

come posso fare?

In quel sito io non vedo cambiare colore ai link al passaggio del mouse.

Comunque la tecnica è sempre quella:

Originariamente inviato da 0-c00l
Se è un link inserisci nel css:

codice:

a:hover {
color: red; /* Colore a caso, metti quello che vuoi */
}

**0-c00l** · 01-05-2011, 15:49

Bhè credo sia uguale (se non vuoi usare i js), il codice resta quello, poi scrivi

codice:

<a href="PATH">[img]linkimmagine[/img]
Clicca sull' immagine</a>

**jurij7** · 01-05-2011, 16:00

ma inserisco questo :
a:hover {
color: red; /* Colore a caso, metti quello che vuoi */
}

in che parte del css ?

e questo :
<a href="PATH">[img]linkimmagine[/img]
Clicca sull' immagine</a>

dove?

grazie

**0-c00l** · 01-05-2011, 16:15

Originariamente inviato da jurij7
ma inserisco questo :
a:hover {
color: red; /* Colore a caso, metti quello che vuoi */
}

in che parte del css ?

e questo :
<a href="PATH">[img]linkimmagine[/img]
Clicca sull' immagine</a>

dove?

grazie

La parte a:hover ecc. in un foglio di stile css , va bene in qualsiasi punto, oppure scrivi tra <head> e </head> della pagina (html o php che sia):

codice:

<style type="text/css">
a:hover {
color: red; /* Colore a caso, metti quello che vuoi */
}
</style>

E poi dopo <body> dove vuoi tu scrivi

codice:

<a href="PATH">[img]linkimmagine[/img]
Clicca sull' immagine</a>

**jurij7** · 02-05-2011, 09:59

non so come mai ma non va.
ho aggiunto tra <head> </head> questa parte :

<style type="text/css">
a:hover {
color: red; /* Colore a caso, metti quello che vuoi */
}
</style>

e poi in <body> </body> questo:

<a href="PATH">[img]linkimmagine[/img]
Clicca sull' immagine</a>

ma passando sull'immagine o sulla parola non mi cambia colore alla parola

io ho già questo :

<div id="mainContent">

[img]immagini/peopleB&W.jpg[/img]</p>

<p class="style5">

People</p>......

forse sbaglio qualcosa

p.s. : come si fa ad aggiungere il codice nella parte tratteggiata del messaggio come fai tu?

**carlomarangoni** · 02-05-2011, 15:06

Originariamente inviato da jurij7
non so come mai ma non va.
ho aggiunto tra <head> </head> questa parte :

<style type="text/css">
a:hover {
color: red; /* Colore a caso, metti quello che vuoi */
}
</style>

e poi in <body> </body> questo:

<a href="PATH">[img]linkimmagine[/img]
Clicca sull' immagine</a>

ma passando sull'immagine o sulla parola non mi cambia colore alla parola

io ho già questo :

<div id="mainContent">

[img]immagini/peopleB&W.jpg[/img]</p>

<p class="style5">

People</p>......

forse sbaglio qualcosa

p.s. : come si fa ad aggiungere il codice nella parte tratteggiata del messaggio come fai tu?

Ho l'impressione che ti manchi un pò le basi di programmazione, prova anche a leggerti una giuda qui in html ce ne sono di belle.

Comunque questo è il codice completo e così funziona bene senza scuse

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>

<style type="text/css">
<!--
a {
	color: #00F;
}
a:hover {
	color: #F00;
}
a img {
	border: none;
	outline: none;
}
-->
</style>
</head>

<body>
    <div>
        <a href="pagina.htm">
            [img]immagine.jpg[/img]
            

             Clicca qui
        </a>
    </div>
</body>
</html>

Per inserire il codice come da regolamento devi usare il tag [CODE] in alto

**jurij7** · 02-05-2011, 17:02

ok ho fatto come mi hai detto ma passando il mouse sopra l'immagine o la scritta, la scritta rimane sempre di colore nero.

Discussione: cambio colore al passaggio del mouse

Strumenti discussione

Ricerca discussione

Visualizza

cambio colore al passaggio del mouse

Permessi di invio