Est-ce possible : hover sur table.

Version imprimable

12/10/2007, 11h24
Sergejack

Est-ce possible : hover sur table.

j'ai une table dans un div sur lequel j'aimerais avoir un effet (couleur du text)au passage de la souris (css :hover).
12/10/2007, 15h11
blueice

Oui c'est possible :-)
12/10/2007, 22h52
Sergejack

Comment ?
13/10/2007, 11h19
blueice

Il suffit d'appliquer une classe ou un id avec les propriétés correspondantes...
13/10/2007, 15h20
Sergejack

Pas selon IE ou alors, montre moi un exemple.

Pas tester sous IE :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td a:link {
    color: #000000;
    display:block;
}
td a:visited {
    color: #000000;
    
}
td a:hover {
    color: #990000;
}
td a:active {
    color: #000000;
}
table { background-color:#CCCCCC; }
td { border:1px solid black; }
-->
</style></head>
 
<body>
<div>
  <table width="45%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><a href="#">Du texte</a></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
</body>
</html>

15/10/2007, 09h36
Sergejack

:mouarf:

Plus sérieusement, quelqu'un sait ?
15/10/2007, 09h40
blueice

Je t'ai répondu...
15/10/2007, 09h42
Bisûnûrs

Quel élément doit être coloré sur le hover de quel élément ?
15/10/2007, 09h58
Sergejack

Citation:

Je t'ai répondu...

Je te dis "fonctionne pas avec IE" et toi tu remets en avant un test sur firefox. :mouarf:

Citation:

Envoyé par Bisûnûrs

Quel élément doit être coloré sur le hover de quel élément ?

J'aimerai changer la police de tout le texte contenu, ou faire changer la couleur de background.
15/10/2007, 10h07
blueice

Citation:

et toi tu remets en avant un test sur firefox.

je n'ai pas parlé de Firefox... !

Citation:

J'aimerai changer la police de tout le texte contenu, ou faire changer la couleur de background.

Dans ce cas c'est du Javascript :roll:
15/10/2007, 10h36
Sergejack

Citation:

Envoyé par blueice

je n'ai pas parlé de Firefox... !

Tu n'as pas parlé de IE non plus de toute façon...

Citation:

Envoyé par blueice

Dans ce cas c'est du Javascript :roll:

Tu ne manques pas de culot d'utiliser ce smiley maintenant. ^^'
Je ne te demande pas de m'écrire le code, tu serais capable de me faire du cobol et d'ajouter "pas tester en javascript".

Bon j'ai pas tout suivi, on va résumer, si tu avais commencé par :

"Est-ce possible de changer la couleur de la police de tout le texte contenu dans une table, ou de faire changer la couleur du background."

On t'aurait tout de suite arrêter et envoyer sur le forum Javascript, la raison est simple, le seul moyen de faire ça en HTML/CSS serait que tout le texte ou cellule soit un lien...
Si c'est le cas, il suffit d'appliquer une propriété hover en CSS à l'élément

Sinon :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> </head> <body> <div align="center"> <table border="1" onmouseout="this.bgColor='#FFFFFF'" onmouseover="this.bgColor='lightgrey'"> <tr> <td>toto</td> <td>toto</td> <td>toto</td> </tr> <tr> <td>tutu</td> <td>tutu</td> <td>tutu</td> </tr> <tr> <td>tata</td> <td>tata</td> <td>tata</td> </tr> </table> </div> </body> </html>

15/10/2007, 11h53
Johnbob

Il faut utiliser les "onmouseover" et "onmouseout" dans les TR (si tu souhaites avoir un effet par ligne).

Code:

<tr onmouseover="this.className='tr_hover';" onmouseout="this.className='tr_pas_hover';">

Attention à ce que le style des TD n'écrase pas le style des TR...
15/10/2007, 11h55
Sergejack

Merci blueice.
Il faut donc bel et bien passer par Javascript.