hover sulle tabelle, link e IE

**daniele50** · 29-10-2006, 12:48

Parto subito dal codice:

css.css

#sfondotd {
background-color: #FFFFFF;
color: #333333;
text-align: center;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#sfondotd:hover {
background-color: #333333;
color: #FFFFFF;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
#bordotable:hover {
background-color: #FF0000;
}

pagina.html (solo la parte interessata)

<table height="30" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC" id="bordotable">
<tr bgcolor="#FFFFFF">
<td width="100" id="sfondotd">home page</td>
<td width="100" id="sfondotd">link</td>
</tr>
</table>

Ho 2 problemi:

1. se uso firefox e mando il mouse su una cella questa cambia giustamente colore (background-color: #333333

, con IE6 non succede, perché?

2. la parola "home page" nella prima cella della tabella è blu e sottolineata a causa del tag <a...>, ho provato con text-decoration:none; ma non cambia nulla, come faccio per far si che il testo sia color 333333 e quando vado sulla cela diventi FFFFFF come definito negli stili? (Il testo na cella senza link si comporta correttamente).

Ciao e grazie a chi mi darà una mano...

**fcaldera** · 29-10-2006, 13:25

1) perchè fino a IE 6 la pseudoclasse hover funziona solo se applicato ai link (e quindi non alle celle)

2) che codice css hai usato per togliere la sottolineatura? il text-decoration: none applicato ai link funziona normalmente.

**andrea.paiola** · 29-10-2006, 13:49

Originariamente inviato da fcaldera
1) perchè fino a IE 6 la pseudoclasse hover funziona solo se applicato ai link (e quindi non alle celle)

se interessa c'è un semplice js che risolve il problema facendo l'hover (volendo lo servi solo a IE6 tramite commenti condizionali).
se non ricordo male l'ho usato su HTML.it

**Another-Life** · 29-10-2006, 14:46

Puoi postare questo javascript pls?? thx

**andrea.paiola** · 29-10-2006, 15:07

Originariamente inviato da Another-Life
Puoi postare questo javascript pls?? thx

eccolo qua
http://utenti.html.it/common/js/over_tabella.js

**fcaldera** · 29-10-2006, 15:09

un esempio da studiare lo puoi trovare qui
http://www.eurizonvita.it/index.php?id=113

lo script è questo
http://www.eurizonvita.it/fileadmin/...denziaFondo.js

**daniele50** · 31-10-2006, 17:29

Ho guardato un po in giro e sono arrivatoa questo punto:

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style type="text/css">
.td01{
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color: #333333;
text-align: center;
text-decoration: none;
background-color: #CCCCCC;
}

.td02{
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color: #CCCCCC;
text-align: center;
text-decoration: none;
background-color: #333333;
}
a {
text-decoration: none;
}
</style>

<body>
<table width="600" border="0" cellspacing="1" cellpadding="0" bgcolor="#CCCCCC">
<tr>
<td height="20" class="td01" onMouseOver="this.className='td02';" onMouseOut="this.className='td01';">prova1</td>
<td class="td01" onMouseOver="this.className='td02';" onMouseOut="this.className='td01';">prova2</td>
</tr>
</table>
</body>
</html>

In questo modo richiamo i vari stili tramite onMouseOver e onMouseOut, il problema si verifica con il link: la parola "prova2" nella seconda cella rimane sempre blu (o viola). Con "text-decoration: none" tolgo la sottolineatura ma come faccio a togliere i colori predefiniti dei link?

**daniele50** · 01-11-2006, 03:48

Così ho risolto il problema e ho creato anche un simpatico effetto "cornice" sulla tabella:

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style type="text/css">
.ta01 { background-color: #CFCFCF; }
.ta02 { background-color: #333333; }
.td01 a {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color: #333333;
text-decoration: none; }
.td01 {
text-align: center;
background-color: #FFFFFF; }
.td02 a {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none; }
.td02 {
text-align: center;
background-color: #333333; }
</style>

<body>
<table width="400" border="0" cellspacing="1" cellpadding="0" class="ta01" onMouseOver="this.className='ta02';" onMouseOut="this.className='ta01';">
<tr>
<td height="20" class="td01" onMouseOver="this.className='td02';" onMouseOut="this.className='td01';">prova1</td>
<td class="td01" onMouseOver="this.className='td02';" onMouseOut="this.className='td01';">prova2</td>
<td class="td01" onMouseOver="this.className='td02';" onMouseOut="this.className='td01';">prova3</td>
</tr>
</table>
</body>
</html>

Ciao a tutti!

Discussione: hover sulle tabelle, link e IE

Strumenti discussione

Ricerca discussione

Visualizza

hover sulle tabelle, link e IE

Risolto!

Permessi di invio