Est-ce possible : hover sur table.

**Sergejack** · 12/10/2007, 11h24

j'ai une table dans un div sur lequel j'aimerais avoir un effet (couleur du text)au passage de la souris (css :hover).

**blueice** · 12/10/2007, 15h11

Oui c'est possible :-)

**Sergejack** · 12/10/2007, 22h52

Comment ?

**blueice** · 13/10/2007, 11h19

Il suffit d'appliquer une classe ou un id avec les propriétés correspondantes...

**Sergejack** · 13/10/2007, 15h20

Pas selon IE ou alors, montre moi un exemple.

**blueice** · 13/10/2007, 16h51

Pas tester sous IE :

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

**Sergejack** · 15/10/2007, 09h36

Plus sérieusement, quelqu'un sait ?

**blueice** · 15/10/2007, 09h40

Je t'ai répondu...

**Bisûnûrs** · 15/10/2007, 09h42

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

**Sergejack** · 15/10/2007, 09h58

Je t'ai répondu...

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

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.

**blueice** · 15/10/2007, 10h07

et toi tu remets en avant un test sur firefox.

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

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

Dans ce cas c'est du Javascript

**Sergejack** · 15/10/2007, 10h36

Envoyé par blueice

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

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

Envoyé par blueice

Dans ce cas c'est du Javascript

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".

**blueice** · 15/10/2007, 11h22

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 html :

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

**Johnbob** · 15/10/2007, 11h53

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

Code :

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

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

**Sergejack** · 15/10/2007, 11h55

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

Est-ce possible : hover sur table.

HTML

Discussions similaires

Partager

Partager