Probleme de hoover dans un tableau

Sujet résolu

2 janvier 2006 à 1:56:48

Voila, j'ai un tableau et j'aimerez que quand je passe la souris sur une ligne, celle-ci change de couleur.
Mon code marche parfaitement mais j'aimerez que dans l'une de ces lignes, seulement 2 cases sur 3 soient coloriées.

Voici les codes :

<table>
<tr>
<td rowspan="4"><img src="images/jeu/pamplemousse.gif" alt="Image de votre pamplemousse"/></td>
<th>Eleveur</th>
<td><? echo $pseudo ; ?></td>
<tr>
<th>Pamplemousse</th>
<td><? echo $pseudo_pamplemousse ; ?></td>
</tr>
<tr>
<th>Points</th>
<td><? echo $points ; ?></td>
</tr>
<tr>
<th>Position</th>
<td><? echo $position ; ?></td>
</tr>
</table>

tr:hover
{
background-color: #F4A723;
}

J'aimerez donc que la premiere <td> contenant l'image de soit pas coloriée au passage de la souris.

Merci

Araya

2 janvier 2006 à 2:12:11

Tu met une class aux deux premières case.

Florent Allard

2 janvier 2006 à 2:13:19

oui mais en fesant cela les 2 cases ne se colorient pas en meme temps au passage de la souris sur l'une d'entre elle

Blue112

2 janvier 2006 à 2:20:42

Du javascript

Florent Allard

2 janvier 2006 à 2:21:58

Je ne connais vraiment pas le JS, et comme cette partie du forum le concerne aussi, si vous avez un moyen de m'aider un peu, ce serait simpa.

Araya

2 janvier 2006 à 2:34:11

Alors essaye avec un div qui englobe les deux premières case, tu la designe par un id et adapte ton css en fonction du nom que tu lui a donné.

Par contre je suis pas sur que ça marche.

++

Florent Allard

2 janvier 2006 à 2:37:59

j'y est deja pensé, j'ai testé avec un div et un span et les deux ne fonctionnent pas

Araya

2 janvier 2006 à 2:45:31

Hum,

Alors la méthode bourinne :

Tu met le contenu des deux premiers case dans un seul <tr> mais séparés par quelques espaces.

Tu assigne une class à ce <tr> et met une image (un trait) d'1px * hauteur d'une ligne en background au centre de la case pour simuler le trait.

C'est chiant, pas propre mais je suis quasiment sur que sa marche

Sinon je vais voir dans mes signets si j'ai pas un script en js qui simplifierai les choses, j'édite si oui.

++

kabuto_fr

2 janvier 2006 à 4:03:03

Bonsoir,

J'ai une autre solution pour toi:

<table>
<tr>
<td rowspan="4"><img src="images/jeu/pamplemousse.gif" alt="Image de votre pamplemousse"/></td>
<th>Eleveur</th>
<td id="pas_de_fond"><? echo $pseudo ; ?></td>
<tr>
<th>Pamplemousse</th>
<td><? echo $pseudo_pamplemousse ; ?></td>
</tr>
<tr>
<th>Points</th>
<td><? echo $points ; ?></td>
</tr>
<tr>
<th>Position</th>
<td><? echo $position ; ?></td>
</tr>
</table>

et pour le css:

tr:hover
{
background-color: #F4A723;
}

tr #pas_de_fond:hover
{
background-color: #FFFFFF;
}

Pour pas de fond tu met la couleur de fond du tableau.

@+

Florent Allard

2 janvier 2006 à 12:01:40

j'ai deja testé cette solution, quand je passe sur la cellule "pasdefond", elle n'est pas coloriée certe, mais quand je passe sur une autre cellule dans le tr, la cellule avec l'id "pasdefond" se colorie a nouveau"

EDIT: En modiifiant un peu ton code (en enlevant le :hoover) il marche parfaitement.
Merci