Se connecter / S'enregistrer
Votre question

Changement de couleur d'une ligne avec css

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
15 Décembre 2010 15:23:12

Bonjour,
je ne connais rien en CSS, mais j'ai un tableau où je veux changer la couleur de chaque ligne au passage de la souris et un autre couleur lorsque j'appuie sur cette ligne.
J'ai mis dans mon tableau cette balise <tr class="style">

je me demande si c'est correct de mettre ça et quoi mettre dans la page .css

merci pour votre aide

Autres pages sur : changement couleur ligne css

a c 232 L Programmation
15 Décembre 2010 15:51:59

Salut,

Pour le passage de la souris, tu as :hover, sauf qu'il me semble qu'IE ne gère pas le :hover sur tous les éléments correctement.
Du coup, le plus simple est certainement de changer la classe de l'élément avec du javascript.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/javascript">
  5. function setMouseOver(elt)
  6. {
  7. elt.className = elt.className == 'style_click' ? 'style_click' : 'style_over';
  8. }
  9. function setMouseOut(elt)
  10. {
  11. elt.className = elt.className == 'style_click' ? 'style_click' : 'style';
  12. }
  13. function setClick(elt)
  14. {
  15. elt.className = elt.className == 'style_click' ? 'style_over' : 'style_click';
  16. }
  17. </script>
  18.  
  19. <style type="text/css">
  20. .style
  21. {
  22. /* le style par défaut */
  23. background-color:white;
  24. }
  25.  
  26. .style_over
  27. {
  28. /* le style lorsque l'on est au dessus de l'élément */
  29. background-color:red;
  30. }
  31.  
  32. .style_click
  33. {
  34. /* le style lorsque l'on a cliqué dessus */
  35. background-color:blue;
  36. }
  37. </style>
  38.  
  39. </head>
  40. <body>
  41.  
  42. <table border="1">
  43. <tr class="style" onmouseover="setMouseOver(this);" onmouseout="setMouseOut(this);" onclick="setClick(this);">
  44. <td>column 1</td>
  45. <td>column 2</td>
  46. <td>column 3</td>
  47. </tr>
  48. <tr class="style" onmouseover="setMouseOver(this);" onmouseout="setMouseOut(this);" onclick="setClick(this);">
  49. <td>ligne 2</td>
  50. <td>ligne 2</td>
  51. <td>ligne 2</td>
  52. </tr>
  53. <tr class="style" onmouseover="setMouseOver(this);" onmouseout="setMouseOut(this);" onclick="setClick(this);">
  54. <td>ligne 3</td>
  55. <td>ligne 3</td>
  56. <td>ligne 3</td>
  57. </tr>
  58. </table>
  59.  
  60. </body>
  61. </html>
m
0
l
15 Décembre 2010 16:02:51

ça marché, merci bien Omar
m
0
l
Contenus similaires
15 Décembre 2010 16:13:04

désolé mais j'ai une autre question:
je me demande si c'est possible d'ouvrir une fenêtre en premier plan lorsque j'appuie sur cette ligne en lieu de changer la couleur en bleu
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS