Fonction hover dans un tableau

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Fonction hover dans un tableau

Message par emc2 Mer 22 Aoû 2018 - 21:43

Détails techniques

Version du forum : Invision
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://sainte-croix.forumgratuit.org/

Description du problème

Bonsoir,

Je bute sur un problème avec la fonction hover qui permet de donner des instructions lorsque l'on passe le curseur sur un endroit précis de l'écran.
Ici, il s'agit de modifier la couleur du background d'une case, l'encre du texte contenu et la couleur de l'encadrement de la case survolée.
Je poste deux image, la première quand le curseur ne survole pas, et la seconde quand il survole une case. Ces deux images représente le résultat que je souhaite obtenir.


Ojectif:

Code utilisé:

Comme le screen le montre, je cherche à faire changer en blanc le texte de la case survolée, à faire changer la couleur du background de cette case seulement, et faire apparaître un encadrement (1px) en contour de cette case.
J'ai essayé pas mal de solution, mais je n'arrive à rien. Je ne maîtrise pas assez le html pour trouver seul une triple action sur un survol.
Merci par avance.

PS: sur les deux images, l'encre des textes à gauche est différent sur l'une et l'autre (vert/gris), mais ce n'est qu'une erreur à ne pas prendre en compte.
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fonction hover dans un tableau

Message par MlleAlys Mer 22 Aoû 2018 - 21:51

Bonjour,
le code est-il sensé être intégré directement dans un message avec son style ?
Si oui, alors il ne faut pas mettre de retour à la ligne entre les balises style, tout doit être en une ligne. Egalement, tous les retours à la ligne que vous ferez entre les différentes balises du tableau s'afficheront avant le tableau.
Vous pouvez essayer le code suivant :

Code:
<style>table.demo {background: #1f2a37;color: #d0d0d0;border-spacing: 3px;} .demo th {background: none;color: inherit;} .demo th, .demo2 td {padding: 1px 5px;background: #374351;} .demo td {border: 1px solid transparent;} .demo td:hover {background: #1f2a37;border-color: #374351;} .demo td:hover span {color: white!important;}</style>

<table class="demo">
<caption>Table 1</caption>
<thead>
<tr>
<th>Nation</th>
<th>Krassland</th>
<th>Ledonie</th>
<th>Kolozistan</th>
<th>Rép. Prya</th>
<th>Belgoge</th>
</tr>
</thead>
<tbody>
<tr>
<th>Capital brut</th>
<td><span style="color: #019803;">$125 044</span></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>Réserve or</th>
<td><span style="color: #FF0000;">-1,23%</span></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>Taux monaie</th>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>

</tr>
<tbody>
</table>
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fonction hover dans un tableau

Message par emc2 Jeu 23 Aoû 2018 - 0:38

Merci, ce code marche parfaitement bien. J'ai apporté quelques petites modifications pour arriver exactement à mo, objectif, mais c'est bon, il fonctionne comme je le souhaite.

Le voici:

Code:
<style>
table.demo {background: #1f2a37;color: #1f2a37;border-spacing: 3px;} .demo th {background: #374351;} .demo th, .demo2 td {padding: 1px 5px;background: #374351;} .demo td {background: #374351; border: 1px solid #1f2a37;} .demo td:hover {background: #1f2a37; border-color: #374351;} .demo td:hover span {color: white!important;}</style>
 
<table class="demo">
   <caption>Table 1</caption>
   <thead>
   <tr>
      <th><span style="color: #009900;">Nation</span></th>
      <th><span style="color: #c9c9c9;">Krassland</span></th>
      <th><span style="color: #c9c9c9;">Ledonie</span></th>
      <th><span style="color: #c9c9c9;">Kolozistan</span></th>
      <th><span style="color: #c9c9c9;">Rép. Prya</span></th>
      <th><span style="color: #c9c9c9;">Belgoge</span></th>
   </tr>
   </thead>
   <tbody>
   <tr>
      <td><span style="color: #009900;">Capital brut</span></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td><span style="color: #009900;">Réserve or</span></td>
      <td><span style="color: #cc0000;">$125 044</span></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td><span style="color: #009900;">Taux monaie</span></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   <tbody>
</table>

Il ne me reste qu'à centrer les textes dans les cases et modifier le curseur et c'est bon. Je balise en résolu, et encore une fois mille merci !
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum