Se connecter avec
S'enregistrer | Connectez-vous

Changement de couleur d'une ligne avec css

Dernière réponse : dans Programmation
Lassé par la pub ? Créez un compte
Expert Programmation

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" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
    

  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>
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde