Appliquer td:hover seulement sur certaines cellules (avec kompozer)

Appliquer td:hover seulement sur certaines cellules (avec kompozer) - HTML/CSS - Programmation

Marsh Posté le 02-03-2013 à 15:47:08    

Bonjour à tous,
 
je souhaite qu'une série de cellules change de couleur quand on passe la souris dessus.
J'arrive à le faire sur toutes les cellules de ma page avec une règle CSS, mais c'est pas ce que je veux.
J'ai essayé de faire un évènement javascript sur un cellule mais ça ne fonctionne pas non plus, je sélectionne onmouseover mais je ne sais pas quoi mettre dans valeur.
Il faut surement que je rentre un bout de code aux endroits voulus mais je suis pas sur de moi.
 
J'utilise kompozer et mes notions en code sont vraiment très limitées.
Je lis des dizaines de tutos et fais plein de recherches mais je trouve pas comment faire.
 
Les parents de ma copine comptent sur moi pour leur faire un ptit site pour leur camping, je me suis lancé dedans, j'avance à petits pas, mais la je bloque, j'ai vraiment besoin d'aide.
 
Merci  :hello:  

Reply

Marsh Posté le 02-03-2013 à 15:47:08   

Reply

Marsh Posté le 02-03-2013 à 16:49:39    

Salut,
 
Met un class="CellColor" sur le td que tu veux "colorer"
 
Et dans ton css :
 
td.CellColor { background-color: #0f0; }
td.CellColor:hover { background-color: #f00; }
 
Pour le faire avec onmouseover :
onmouseover="this.style.backgroundColor='#f00';"
 
Par contre tu dois aussi mettre le onmouseout pour rétablir la couleur

Reply

Marsh Posté le 02-03-2013 à 17:43:56    

Merci pour ta réponse,
mais j'ai beau m'acharner ça veut po!  :fou:  
J'ai essayé plusieurs fois les 2 méthode sans succès.
 
 


Message édité par ben05 le 02-03-2013 à 18:10:22
Reply

Marsh Posté le 02-03-2013 à 17:56:37    

Je viens d'essayer sous Kompozer et ça marche bien, peut etre que tu a loupé un truc dans la structure, voila le source html :
 

Code :
  1. <html>
  2. <head>
  3.   <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  4.   <title></title>
  5.   <style type="text/css">
  6. td.CellColor { background-color: #0f0; }
  7. td.CellColor:hover { background-color: #f0; }
  8.   </style>
  9. </head>
  10. <body>
  11. <table>
  12.   <tbody>
  13.     <tr>
  14.       <td>test</td>
  15.       <td class="CellColor">test</td>
  16.       <td>test</td>
  17.     </tr>
  18.   </tbody>
  19. </table>
  20. <br>
  21. </body>
  22. </html>


Reply

Marsh Posté le 02-03-2013 à 18:10:30    

Bon finalement j'ai réussi mais en modifiant le code source a al main, car quand on rentre les valeurs dans kompozer, ça rajoute  &quote; juste avant this.style.background et du coup ça marche pas.  
En l'enlevant ça fonctionne, bug ou alors y a un truc que j'ai pas du bien capté?
 
Ce qui est bizarre aussi c'est que dans l'aperçu kompozer le changement de couleur n’apparaît pas, mais en l'ouvrant dans le navigateur, ça apparaît  :??:  


Message édité par ben05 le 02-03-2013 à 18:17:57
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed