Printable View
Ciao a tutti ho dei problemi con :hover che dovrebbe cambiarmi lo sfondo di tutta la riga di una tabella al passaggio del mouse:
nel file css ho messo questa regola:Codice HTML:
<tr id='riga'></tr><td></td><td></td><td></td><td></td>
</tr>
Cosa sto sbagliando??Codice:#riga:hover{
background-color:blue;}
}
il codice come lo hai postato e' sbagliato..
esempio:
Codice:<!DOCTYPE html>
<html>
<head>
<style>
#riga:hover
{
background:blue;
}
</style>
</head>
<body>
<table style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr id="riga">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Era per non postare l'intero codice in PHP:lol:
Codice PHP:
echo "
<table id = 'tab'>
<caption id='cap'>Clienti ordinati per </caption>
<thead><tr>
<th id='col'>ID Cliente</font> </th>
<th id='col'>Ragione Sociale</font> </th>
<th id='col'>Nome</font> </th>
<th id='col'>Cognome</font> </th>
<th id='col'>Telefono</font> </th>
<th id='col'>Cellulare</font> </th>
<th id='col'>Via</font> </th>
<th id='col'>Civico</font> </th>
<th id='col'>Paese</font> </th>
<th id='col'>Provincia</font> </th>
<th id='col'>CAP</font> </th>
<th id='col'> Codice Fiscale</font> </th>
<th id='col'>Partita Iva</font> </th>
<th id='col'>Sito Web</font> </th>
</tr></thead>
";
$a = 1;
foreach($dbh->query($sql) as $row){
if( $a % 2 == 0){
echo "<tr id ='riga'>
<td id='pari'>".$row['id_cliente']."</td>";
echo "<td id='pari'>".$row['ragione_sociale']."</td>";
echo "<td id='pari'>".$row['nome']."</td>";
echo "<td id='pari'>".$row['cognome']."</td>";
echo "<td id='pari'>".$row['telefono']."</td>";
echo "<td id='pari'>".$row['cellulare']."</td>";
echo "<td id='pari'>".$row['via']."</td>";
echo "<td id='pari'>".$row['civico']."</td>";
echo "<td id='pari'>".$row['paese']."</td>";
echo "<td id='pari'>".$row['provincia']."</td>";
echo "<td id='pari'>".$row['cap']."</td>";
echo "<td id='pari'>".$row['cf']."</td>";
echo "<td id='pari'>".$row['pi']."</td>";
echo "<td id='pari'>".$row['sito']."</td></tr> ";
}
else {
echo "<tr id ='riga'>
<td id='dispari'>".$row['id_cliente']."</td>";
echo "<td id='dispari'>".$row['ragione_sociale']."</td>";
echo "<td id='dispari'>".$row['nome']."</td>";
echo "<td id='dispari'>".$row['cognome']."</td>";
echo "<td id='dispari'>".$row['telefono']."</td>";
echo "<td id='dispari'>".$row['cellulare']."</td>";
echo "<td id='dispari'>".$row['via']."</td>";
echo "<td id='dispari'>".$row['civico']."</td>";
echo "<td id='dispari'>".$row['paese']."</td>";
echo "<td id='dispari'>".$row['provincia']."</td>";
echo "<td id='dispari'>".$row['cap']."</td>";
echo "<td id='dispari'>".$row['cf']."</td>";
echo "<td id='dispari'>".$row['pi']."</td>";
echo "<td id='dispari'>".$row['sito']."</td></tr> ";
}
$a++;
}
echo"
</table>
";
il css é sempre lo stesso ti posto tutto perchè a questo punto penso che ci sia qualche regola che interferisce per il tuo codice mi va:
Codice:
body { background-color: ghostwhite; margin:0px; }
#tab{
border:1px solid #a2a3a2;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
margin:10px;
padding:2px;
margin-left:auto;
margin-right:auto;
box-shadow: 10px 10px 5px #dedede;
}
#cap{
color: blue;
font-size:large;
font-weight: bold;
text-transform:uppercase;
margin:8px;
}
#col,#pari,#dispari { color:#363636;
padding:.4em;
}
#col{ background:#5C443A;
color:#FFFFFF;
padding:3px 10px 3px 10px;
text-align:left;
text-transform:uppercase;
}
#pari{
background-color:#fff;
}
#dispari{
background-color:#D3E4E5;
}
riga:hover{
background-color:blue;}
input {
background: #363636;
border: 1px solid #323232;
color: #fff;
height: 30px;
line-height: 30px;
width: 1%;
padding: 0 10px;
}
Nel codice PHP chiudi dei tag senza averli aperti: </font>
Nel CSS l'unico stato in hover e' riga , ma manca #
cmq il vero problema sta che definisci il background di #pari e #dispari che impediscono lo stato hover di #riga
se provi a disabilitarli vedrai che #riga:hover funziona .
Corretti!Dopo tutti i tentativi avevo pasticciato un po'. Ad ogni modo se tolgo le regole per pari e dispari funziona, ma volevo tenerli così. Devo passare a jquery??
Non devi usare uno script .. il problema persiste perche' c'e' una sovrapposizione di layer tra TD e TR
Ci sono due soluzioni:
(1) per il TD (quindi pari e dispari) usi come background un RGBA con semitrasparenza (es: rgba(200,0,0,0.5);)
in questo modo avrai la possibilita' di vedere il colore di background di TR (quindi riga)
oppure
(2) definisci in css lo stato hover per riga con modifica del background di pari e dispari
esempio:
ti consiglio inoltre di non usare un id se puoi usare una class .. mi spiego meglio:Codice:tr:hover td{
background:rgba(2100,0,0,0.2);;
}
pari e dispari li assegni come id , ma ID e' un identificativo che dovrebbe essere usato per individuare un elemento
mentre quando vuoi assegnare uno stile a piu' elementi dovresti usare un CLASS
quindi avresti #riga:hover .pari che significa durante lo stato di hover dell'elemento riga imposto lo stile per la classe pari.
ora ho risolto grazie mille chiarissimo:lol: