ciao a tutti/e,
ho una tabella di 1 riga per 5 colonne:
<table>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</table>
il colore di tutti i bordi sia interni che esterni è rosso.
vorrei che al passaggio del mouse il bordo della singola cella
diventi giallo.
come posso fare?
GRAZIE.
Dici una cosa del genere?
Codice PHP:<html>
<head>
<title>prova</title>
<style>
.tabella
{
border-collapse:none;
background:yellow;
}
.tabella tr
{
margin:0px;
padding:0px;
}
.tabella tr td
{
width:100px;
border:2px solid red;
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<table class="tabella" align="center">
<tr>
<td onmouseover="this.style.borderColor='yellow'" onMouseOut="this.style.borderColor='red'">xxx</td>
<td onmouseover="this.style.borderColor='yellow'" onMouseOut="this.style.borderColor='red'">xxx</td>
<td onmouseover="this.style.borderColor='yellow'" onMouseOut="this.style.borderColor='red'">xxx</td>
<td onmouseover="this.style.borderColor='yellow'" onMouseOut="this.style.borderColor='red'">xxx</td>
<td onmouseover="this.style.borderColor='yellow'" onMouseOut="this.style.borderColor='red'">xxx</td>
</tr>
</table>
</body>
</html>
quasi...
l' ho sistemato cosi perchè ho bisogno delle celle unite e dello sfondo uguale a quello della pagina...
...rimane un ultimo problema cosi funziona ma non si illumina il lato destro della cella sul mouse over? riesci a sistemarlo??
html>
<head>
<title>prova</title>
<style>
.tabella
{
border-collapse:collapse;
}
.tabella tr
{
margin:0px;
padding:0px;
}
.tabella tr td
{
width:100px;
border:2px solid red;
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<table class="tabella" align="center">
<tr>
<td onmouseover="this.style.borderColor='yellow'" onMouseOut="this.style.borderColor='red'">xxx</td>
<td onmouseover="this.style.borderColor='yellow'" onMouseOut="this.style.borderColor='red'">xxx</td>
<td onmouseover="this.style.borderColor='yellow'" onMouseOut="this.style.borderColor='red'">xxx</td>
<td onmouseover="this.style.borderColor='yellow'" onMouseOut="this.style.borderColor='red'">xxx</td>
<td onmouseover="this.style.borderColor='yellow'" onMouseOut="this.style.borderColor='red'">xxx</td>
</tr>
</table>
</body>
</html>
L'unico modo che ho trovato è togliere il border-collapse....
Ora dovresti giocare con i margini dei td io ho messo cosi.
Te cerca di unirli.
Codice PHP:<html>
<head>
<title>prova</title>
<style>
.tabella
{
margin:0px;
padding:10px;
}
.tabella tr
{
}
.tabella tr td
{
width:100px;
border:10px solid red;
margin:0px;
padding:0px;
}
</style>
<script>
function colora(elemento,colore)
{
elemento.style.borderTopColor=colore;
elemento.style.borderRightColor=colore;
elemento.style.borderBottomColor=colore;
elemento.style.borderLeftColor=colore;
}
</script>
</head>
<body>
<table class="tabella" align="center">
<tr>
<td onmouseover="colora(this,'yellow')" onMouseOut="colora(this,'red')">xxx</td>
<td onmouseover="colora(this,'yellow')" onMouseOut="colora(this,'red')">xxx</td>
<td onmouseover="colora(this,'yellow')" onMouseOut="colora(this,'red')">xxx</td>
<td onmouseover="colora(this,'yellow')" onMouseOut="colora(this,'red')">xxx</td>
<td onmouseover="colora(this,'yellow')" onMouseOut="colora(this,'red')">xxx</td>
</tr>
</table>
</body>
</html>
Perche` fare in JS una cosa che si puo` fare con i CSS?
E` indice di cattiva progettazione e carica inutilmente il client (oltre a non essere visibile in browser senza supporto JS)
Nei CSS esiste la pseudoclasse :hover, che da` la formattazione quando il mouse e` sopra l'oggetto
(purtroppo in IE6 tale pseudoclasse funziona solo per i link).
PS: quando si posta del codice, e` opportuno usare i codici VB correttamente, altrimenti e difficile da leggere: prova ad usare il tasto # sopra il form di inserimento.
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
Mich_ ha perfettamente ragione.
Colpa della domenica.
Codice PHP:<html>
<head>
<title>prova</title>
<style>
.tabella
{
margin:0px;
padding:10px;
}
.tabella tr td
{
width:100px;
border:10px solid red;
margin:0px;
padding:0px;
}
.tabella tr td:hover
{
border:10px solid yellow;
}
</style>
</head>
<body>
<table class="tabella" align="center">
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</table>
</body>
</html>
Permessi di invio
Rispondi quotando