Rollover sur les <tr>

[recherche_webmaster]

Bonsoir,

Voilà j'ai un tableau dont les lignes se présentent ainsi :

<tr>
<td>  <a href="monlien">lien1</a>   </td>
<td>  <a href="monlien">lien2</a>   </td>
</tr>

C'est banal.

J'ai une instruction CSS qui fait un rollover sur toute la case du tableau où il y a lien.

Ca fonctionne.

Maintenant je voudrais une chose comme ça:

 <a href="monlien">
<tr>
<td>  lien1  </td>
<td> lien2  </td>
</tr>
</a>

Okay ça va faire hurler tout le monde. Mais bon vous aurez compris que je voudrais que toute la ligne TR réagissent au lien en changeant de background puisque le contenu des deux TD est en rapport et mène à la même page.

Un rollover CSS sur toute la ligne TR quoi.

Et bien je n'y arrive pas.

[Dudu]

Bonsoir,

Il suffit de placer un pseudo format :hover sur le tr, en CSS.

Comme ceci

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

Mais par contre, ce code va créer un rollover sur tous les <tr> sans exception, qu'il y ait des liens ou non dans les <td> du <tr>

[recherche_webmaster]

Bon ça va pas alors j'ai des TR qui ne doivent pas rolloveriser.

Mais je peux donner une classe spéciale à ces TR qui les exonère de la règle commune non?

[Xavier]

Oui, tu donne une classe aux td, par exemple rollover, et le code devient le suivant :

tr:hover .rollover {background-color:#f00;}

Quand la souris survole la ligne, toutes les cases avec la classes rollover prennent la couleur de fond rouge ! (sauf dans IE bien entendu).

[Dudu]

Oui, dans ce cas tu fais comme çà

<a href="monlien">
<tr class="rollover">
<td><a href="#">lien1</a></td>
<td><a href="#">lien2</a></td>
</tr>

avec ce code CSS

tr.rollover:hover {background-color:#f00;}

Par contre, je viens de m'apercevoir d'une chose: le code HTML que tu as écrit est complètement invalide: une balise <a> ne peut pas comporter de cellules de tableaux

Sans quoi çà risque de s'afficher n'importe comment selon le navigateur.

[edit] Le varan a été plus rapide que moi [/edit]

Modifié 21 Août 2005 par Dudu

[Xavier]

Par contre, je viens de m'apercevoir d'une chose: le code HTML que tu as écrit est complètement invalide: une balise <a> ne peut pas comporter de cellules de tableaux

<{POST_SNAPBACK}>

Il a dit qu'il voudrait faire quelque chose comme...

Le code HTML à mettre avec mon CSS est du genre :

<tr>
<td class="rollover">  <a href="monlien">lien1</a>   </td>
<td class="rollover">  <a href="monlien">lien2</a>   </td>
<td>  <a href="monlien">lien qui ne doit pas changer</a>   </td>
</tr>

(donc à priori tout à fait valide, sauf que les tables ne sont pas prévues pour faire de la mise en forme, mais on admettra que dans ce cas elles sont là pour présenter les données, vu qu'on a pas plus d'infos sur le sujet )

Tu peux également souligner les liens1 et 2 (mais pas le 3) avec le code suivant :

tr:hover .rollover a {text-decoration:underline;}

[edit] Varan, varan... c'est un tout petit lézart [/edit]

Modifié 21 Août 2005 par Xavier

[recherche_webmaster]

Bouh et bien ça ne fonctionne pas du tout, j'ai essayé le code xavier, et tout mon tableau descend de 20%.

La seule ligne qui veut bien changer de background c'est une ligne à l'allure tout à fait saugrenue ma foi qui se plait à faire la maligne dans un coin de la fenêtre.

A un endroit que je ne suspectais même pas contenir du code du reste.

Par contre, je viens de m'apercevoir d'une chose: le code HTML que tu as écrit est complètement invalide: une balise <a> ne peut pas comporter de cellules de tableaux 


Il a dit qu'il voudrait faire quelque chose comme...

euh ouais mais j'y ai cru

Modifié 21 Août 2005 par recherche_webmaster

[Dudu]

Oups, au temps pour moi j'avais mal lu

T'aurais une URL, recherche_webmaster ? Ce serait sûrement plus simple...

PS: Xavier tu voulais dire un lézard pas vrai ?

[petit-ourson]

Cela ne fonctionnera que sur Firefox et ses compagnons. Le "hover" ne fonctionne que sur les liens il me semble sous internet explorer.

[recherche_webmaster]

Si ça ne fonctionne pas sur IE malheureusement ça n'est pas la peine je crois.

Le site est protégé par apache pour le moment, pas d'url dsl.

Mais une question d'un tout autre sujet, je ne vais pas ouvrir un post que pour ça. La réponse m'aidera à me décider pour approfondir ou non ce problème des TR avec rollovers (c'est de toute façon possible sur IE je l'ai vu sur pleins de forums).

Voila la question :

Dans mon tableau dynamique je vais avoir, pour chaque ligne, un mot spécifique dans le premier TD puis un site internet dans le second TD, avec url.

Plusieurs fois dans la page, le même site internet va apparaître, parfois plusieurs dizaines de fois. Est ce que les moteurs de recherche ne vont pas considérer qu'il y a trop de fois le même nom/url d'où mauvais référencement assuré?

En fonction de la réponse je change tout ou non.