[css] Pulsanti che cambiano al passare del mouse [Archivio]

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:

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:

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

ho provato a fare cosi per il passaggio del mouse
a.tasti:hover {background-image: url(altrosfondo.jpg)}

ed anche cosi:
.tasti:hover {background-image: url(altrosfondo.jpg)}
ma non ci sta nessun cambiamento, come devo operare? :D

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...

<!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