Probleme avec l'evenement :hover

**casawi** · 20/05/2009, 23h13

Salut tout le monde,
J'ai une table, lorsque je passe la souris sur une ligne, je veux que celle ci prenne une couleur (par exemple bleu).
voici mon code :

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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" >
	tr{
		background-color:#00FFCC;
 
	}
	tr :hover{
		background-color:#0099FF;
	}
</style>
</head>
 
<body>
<table width="665" border="1">
  <tr>
    <td>aaa</td>
    <td>aaa</td>
    <td>aaa</td>
  </tr>
  <tr>
    <td>bbb</td>
    <td>bbb</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>ccc</td>
    <td>ccc</td>
    <td>ccc</td>
  </tr>
 </table> 
</body>
</html>

.
Mon problème est que les éléments qui prennent ma couleur (bleu) sont les cellules et pas les lignes tout entier. ce qui correspond pas avec le code

Code :

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

1
2
3
tr :hover{
		background-color:#0099FF;
	}

Avez vous une idée sur ce problème?
Et merci d'avance.

**N_BaH** · 20/05/2009, 23h25

Il y a un espace en trop devant les deux points :
tr:hover

**casawi** · 21/05/2009, 01h20

Merci N_BaH ça résout le problème.
autre question est ce qu'il y a une possibilité lors du passage de la souris d'obtenir une couleur léger de celle de la ligne, mettons nous dans le cas ou la couleur du fond n'est pas connue? (dans mon cas vert, et vert léger quand je passe la souris).

**desert** · 21/05/2009, 10h54

Bonjour,
Si la couleur n'est pas connue à l'avance, tu vas devoir te tourner vers Javascript. Fais une petite recherche sur le forum, la question a sûrement été déjà postée.

**casawi** · 22/05/2009, 00h52

Merci desert pour ta réponse.
J'ai fais des recherches et j'ai trouvé qu'on peut traiter le sujet soit avec CSS soit avec javascript.
En tout cas je vais créer une autre discussion à ce sujet.
Merci encore.

**sibile** · 26/05/2009, 00h55

Tu peux aussi tester l' effet de la propriété opacity:

Code css :

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

1
2
3
4
5
6
7
 
tr:hover {
/* pour IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

En modifiant les chiffres.

Mais cela risque de rendre les textes moins lisibles.

Probleme avec l'evenement :hover

Survol d'un élément en CSS (:hover)

Vue hybride

Discussions similaires

Partager

Partager