:hover che non funziona

**giacomofabbian** · 10-07-2014, 23.21.00

Ciao a tutti ho dei problemi con :hover che dovrebbe cambiarmi lo sfondo di tutta la riga di una tabella al passaggio del mouse:

Codice HTML:

<tr id='riga'></tr><td></td><td></td><td></td><td></td>
</tr>

nel file css ho messo questa regola:

Codice:

#riga:hover{
background-color:blue;}
}

Cosa sto sbagliando??

**NLSweb** · 10-07-2014, 23.58.25

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>

**giacomofabbian** · 11-07-2014, 09.56.45

Era per non postare l'intero codice in PHP

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;
    
}

**NLSweb** · 11-07-2014, 11.18.39

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 .

**giacomofabbian** · 11-07-2014, 11.30.31

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

**NLSweb** · 11-07-2014, 13.02.41

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:

Codice:

tr:hover td{
 background:rgba(2100,0,0,0.2);;
}

ti consiglio inoltre di non usare un id se puoi usare una class .. mi spiego meglio:
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.

**giacomofabbian** · 11-07-2014, 14.15.27

ora ho risolto grazie mille chiarissimo

Discussione: :hover che non funziona

LinkBack

Strumenti discussione

Display

:hover che non funziona

Tags for this Thread

Regole di scrittura