TR HOVER dans phpMyAdmin

01 oct. 2007, 17:42

Bonjour,

Je n'arrive pas à reproduire l'effet TR HOVER, qui fait surligné la ligne complete quand on passe la souris dessus.
J'ai fait le miens
Autant sous Firefox ca marche, mais sous IE6 rien.

Je sais qu'il y a une incompatibilité mais je n'arrive pas a comprendre pourquoi ca marche pourtant dans le cas de phpMyAdmin.

Merci de vos lumieres.

01 oct. 2007, 18:07

sous Firefox ca marche

Et ça marche comment ? Tu n'expliques pas comment tu fais.

01 oct. 2007, 18:25

Oups, voici le code simplifié

Mon CSS

Code : Tout sélectionner

tr:hover {
    background: #69F;
    color: white;
    font-weight: bolder;
}

Code : Tout sélectionner

<tr onclick="location.href='tel.php?$id', target='_blank';" >
        <td>$nom</td>
        <td>$prenom</td>
</tr>

Je viens de m'apercevoir que l'effet dans phpmyadmin etait encore plus sympa, c'est a dire qu'en plus la ligne est selectionné quand on clique dessus.
J'aimerais bien refaire la meme chose.[/code]

01 oct. 2007, 18:57

Attention, la pseudo-classe :hover ne fonctionnera que pour les liens hyper-texte sous IE qui ne l'interprète que partiellement.

Voir ici.

01 oct. 2007, 19:04

Attention, la pseudo-classe :hover ne fonctionnera que pour les liens hyper-texte sous IE qui ne l'interprète que partiellement.

Voir ici.

Merci

il faut que je rajoute

Code : Tout sélectionner

a span{
    background-color:#FFC;
}
a:hover span{
    background-color:#FCC;
}

Mais que va devenir mon code précedent ?
Dois je faire un remplacer tout ou faut il que j'ajoute ce supplement ? et donc polluer le code html pour etre compatible FF et IE ?

01 oct. 2007, 19:14

Pour une ligne de tableau, je suggèrerais l'utilisation d'un gestionnaire d'évènement onmouseover et oumouseout afin de modifier dynamiquement la couleur d'arrière-plan de la ligne.

Quelque chose du genre :

Code : Tout sélectionner

<table summary="">
  <tr style="color: #000; background-color: #efefef;" onmouseover="this.style.backgroundColor='#9ff'" onmouseout="this.style.backgroundColor='#efefef'">
    <td><p>Bla bla quelconque pour meubler cette illustration.</p></td>
  </tr>
  <tr style="color: #000; background-color: #fff;" onmouseover="this.style.backgroundColor='#9ff'" onmouseout="this.style.backgroundColor='#fff'">
    <td><p>Bla bla quelconque pour meubler cette illustration.</p></td>
  </tr>
  <tr style="color: #000; background-color: #efefef;" onmouseover="this.style.backgroundColor='#9ff'" onmouseout="this.style.backgroundColor='#efefef'">
    <td><p>Bla bla quelconque pour meubler cette illustration.</p></td>
  </tr>
</table>

01 oct. 2007, 19:27

Pour une ligne de tableau, je suggèrerais l'utilisation d'un gestionnaire d'évènement onmouseover et oumouseout afin de modifier dynamiquement la couleur d'arrière-plan de la ligne.

Quelque chose du genre :
Code : Tout sélectionner
<table summary=""> <tr style="color: #000; background-color: #efefef;" onmouseover="this.style.backgroundColor='#9ff'" onmouseout="this.style.backgroundColor='#efefef'"> <td><p>Bla bla quelconque pour meubler cette illustration.</p></td> </tr> <tr style="color: #000; background-color: #fff;" onmouseover="this.style.backgroundColor='#9ff'" onmouseout="this.style.backgroundColor='#fff'"> <td><p>Bla bla quelconque pour meubler cette illustration.</p></td> </tr> <tr style="color: #000; background-color: #efefef;" onmouseover="this.style.backgroundColor='#9ff'" onmouseout="this.style.backgroundColor='#efefef'"> <td><p>Bla bla quelconque pour meubler cette illustration.</p></td> </tr> </table>

Cette solution me plait bien, mais y a t'il une solution pour que la couleur d'origine quand on sort du focus, revienne ?
Car j'ai un tableau avec une alternance de couleur (odd,even).

01 oct. 2007, 19:35

Et à ton avis à quoi sert le "onmouseout" ?

01 oct. 2007, 21:32

Et à ton avis à quoi sert le "onmouseout" ?

oui je comprends, mais si la couleur de fond change une fois sur deux ?

Code : Tout sélectionner

<tr bgcolor="#d0d0d0">..
<tr bgcolor="#d0d0d0">..

02 oct. 2007, 06:40

As-tu testé le code que j'ai indiqué dans un navigateur ?

02 oct. 2007, 07:36

As-tu testé le code que j'ai indiqué dans un navigateur ?

oui
je me suis trompé

<tr bgcolor="#d0d0d0">..
<tr bgcolor="#eeeeee">..

une ligne sur deux est coloré, par smarty.
En ajoutant ton code ca marche bien sauf que la couleur ne reviens pas quand le pointeur sort du champs. si je fixe une couleur de sortie sur onmouseout, cela ne pourra pas marcher, car une ligne sur deux change. Il aurait été plus simple si Js permetais de reinitialiser la couleur.

02 oct. 2007, 07:53

Ça veut donc dire que dans ton template, tu dois indiquer la couleur d'arriêre-plan dynamiquement dans le gestionnaire d'évènement de la même manière que tu le fais déjà pour la ligne normale. Saisis-tu le principe ?

02 oct. 2007, 09:24

Ça veut donc dire que dans ton template, tu dois indiquer la couleur d'arriêre-plan dynamiquement dans le gestionnaire d'évènement de la même manière que tu le fais déjà pour la ligne normale. Saisis-tu le principe ?

Enfin il y a quand meme un soucis, ici c'est smarty qui genere l'alternance dans les balises TD. Je ne vois pas comment modifier le onmouseout

Code : Tout sélectionner

 {foreach from=$fact2 item=i}
<tr bgcolor="{ cycle values="#eeeeee,#d0d0d0" }"  
onmouseover="this.style.backgroundColor='#9ff'"  
onmouseout="this.style.backgroundColor='#efefef'">
<td>{$i.f0}</td> 
<td>{$i.f1|}</td> 
</tr>{/foreach} 
</table>

TR HOVER dans phpMyAdmin

Qui est en ligne