surligner ligne au passage de la souris

**solaris13** · 04/01/2010, 11h59

bonjour j'ai construit un tableau et j'aimerais que lorsque je passe ma souris sur une ligne celle ci se "surligne" (comme dans phpmyadmin). Auriez vous une idée merci

**Vil'Coyote** · 04/01/2010, 15h30

salut,
pour cela utilisation d'un onmouseover et du css pour changer la couleur de ta ligne.

**solaris13** · 05/01/2010, 09h01

effectivement merci beaucoup.
mais j'ai un autre probleme...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<head>
    <style>   
        .survol    {    background-color:#FFFF00;
                        color:blue;
                   }
        .parti     {    background-color:transparent;
                        color:black;
                   }
    </style>
</head>
<body>
    <table>
        <tr    onmouseover="this.className='survol';"
               onmouseout="this.className='parti';">
            <td>l1 c1</td><td>l1 c2</td><td>l1 c3</td></tr>
        <tr    onmouseover="this.className='survol';"
               onmouseout="this.className='parti';">
            <td>l2 c1</td><td>l2 c2</td><td>l2 c3</td></tr>       
    </table>
</body>

j'ai mon code qui fonctionne sans pb en html mais j'utilise ce code pour avec du php qui rempli ce tableau. ce qui fait que je me retrouve avec du code du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<head>
    <style>   
        .survol    {    background-color:#FFFF00;
                        color:blue;
                   }
        .parti     {    background-color:transparent;
                        color:black;
                   }
    </style>
</head>
<body>
<?php
    echo '<table>';
        echo'<tr    onmouseover="this.className='survol';"
               onmouseout="this.className='parti';">';
            echo '<td>l1 c1</td><td>l1 c2</td><td>l1 c3</td></tr>';
etc..
?>

et cela ne fonctionne plus dans du php.
Si vous avez deja rencontré cette erreur...
Merci (oui je sais j'abuse lol)

**sebhm** · 05/01/2010, 10h39

bonjour,

ce sont les quotes simples qui posent problemes.
Ce sont les délimiteurs de ta chaine de caractere et tu veux que PHP les affiches autour des noms de classe (survol et parti).
Pour cela il faut les échapper avec un antislash (sinon PHP crois que c'est la fin de la chaine)

**cahnory** · 05/01/2010, 20h46

Sinon en css/html seulement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

table tr:hover { // }

C'est compatible ie à partir du 7 il me semble. Pour ie 6 il y a un script js qui se charge de corriger la prise en compte de la pseudo-classe hover... au besoin je regarderai dans mes fichiers au taff demain.

**sebhm** · 05/01/2010, 21h39

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

table tr:hover { // }

je ne connais pas du tout cela.

t'as un lien vers une doc ?

**cahnory** · 06/01/2010, 11h01

Voici tout droit sorti du site du w3c :
http://www.w3.org/TR/CSS2/selector.h...pseudo-classes

Les limitations (source : http://www.quirksmode.org/css/contents.html) :

IE 5/6 supports both only on links. IE 7 supports :hover, but not :active, on all elements.
Konqueror removes the :active styles almost immediately.

Pour rendre tout ça compatible avec js :
http://www.xs4all.nl/~peterned/csshover.html