[css] Pulsanti che cambiano al passare del mouse

Re Lothar · 05-03-2008, 17:53

Con il css vorrei usare la proprietà hover per poter cambiare lo sfondo della div del pulsante al passaggio del cursore.
Ho provato tale proprietà con i link testuali e mi funziona, ho fatto cosi:

Codice:

a {       color: #ffffff;}
a:hover {color: #000000;}

In questo modo quando il link è fermo rimane bianco, mentre quando ci passo su il cursore diventara nero, fin qui tutto ok.
Ora io però uso dei pulsanti cioè degli sfondi applicati a delle div, che hanno un certo nome id, o classe:

Codice:

.tasti {background-image: url(example.jpg)}

ho provato a fare cosi per il passaggio del mouse

Codice:

a.tasti:hover {background-image: url(altrosfondo.jpg)}

ed anche cosi:

Codice:

.tasti:hover {background-image: url(altrosfondo.jpg)}

ma non ci sta nessun cambiamento, come devo operare?

tæo · 05-03-2008, 21:03

la pseudo-classe :hover potrebbe dare problemi in IE se non applicata ai classici elementi di tipo anchor.

detto questo...

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css">
	a.title { background-image: url(http://www.hwupgrade.it/forum/images_hwu/smilies/stordita.gif)}
	a.title:hover {background-image: url(http://www.hwupgrade.it/forum/images_hwu/smilies/fagiano.gif)}
	</style>
</head>

<body>

<a href="#" class="title">asdasd asdasd</a>

</body>
</html>

ho provato con questo codice e funziona regolarmente (usando Safari e FireFox)

prova a riportare il codice incriminato e qualche dettaglio sull'ambiente di sviluppo se hai ancora problemi

05-03-2008, 17:53	#1
Re Lothar Senior Member Iscritto dal: Jan 2006 Messaggi: 413	[css] Pulsanti che cambiano al passare del mouse Con il css vorrei usare la proprietà hover per poter cambiare lo sfondo della div del pulsante al passaggio del cursore. Ho provato tale proprietà con i link testuali e mi funziona, ho fatto cosi: Codice: a { color: #ffffff;} a:hover {color: #000000;} In questo modo quando il link è fermo rimane bianco, mentre quando ci passo su il cursore diventara nero, fin qui tutto ok. Ora io però uso dei pulsanti cioè degli sfondi applicati a delle div, che hanno un certo nome id, o classe: Codice: .tasti {background-image: url(example.jpg)} ho provato a fare cosi per il passaggio del mouse Codice: a.tasti:hover {background-image: url(altrosfondo.jpg)} ed anche cosi: Codice: .tasti:hover {background-image: url(altrosfondo.jpg)} ma non ci sta nessun cambiamento, come devo operare? __________________ http://vimeo.com/kappaz

Strumenti
Mostra una versione stampabile Invia questa pagina per email