Fonction hover dans un tableau
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Fonction hover dans un tableau
Détails techniques
Version du forum : InvisionPoste 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é:
- Code:
<style>
.demo {border:3px solid #1f2a37; border-collapse:collapse; padding:5px;}
.demo th {border:3px solid #1f2a37; padding:5px; background:#374351;}
.demo td {border:3px solid #1f2a37; padding:5px; background:#374351;}
.demo td:hover {background-color:#1f2a37;}
.srvl {background:#374351; color:#ffffff}
.srvl:hover #srvl{background-color:#1f2a37;
</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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><span style="color: #009900;">Réserve or</span></td>
<td><div><span id="srvl" style="background-color:#374351;
border:solid 2px; color: #1f2a37; padding: 5px;"><span style="color: #000000;">$125 044</span></div></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><span style="color: #009900;">Taux monaie</span></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tbody>
</table>
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.
Re: Fonction hover dans un tableau
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 :
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> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>Réserve or</th>
<td><span style="color: #FF0000;">-1,23%</span></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>Taux monaie</th>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tbody>
</table>
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Fonction hover dans un tableau
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:
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 !
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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><span style="color: #009900;">Réserve or</span></td>
<td><span style="color: #cc0000;">$125 044</span></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><span style="color: #009900;">Taux monaie</span></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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 !
Sujets similaires
» Souci dans un tableau
» Mettre le hover dans ma barre de navigation
» Texté coupé dans la feuille de personnage avec effet hover
» Besoin d'aide pour redimensionner les images dans un code en hover
» Description section + X message dans X sujets + image = dans tableau
» Mettre le hover dans ma barre de navigation
» Texté coupé dans la feuille de personnage avec effet hover
» Besoin d'aide pour redimensionner les images dans un code en hover
» Description section + X message dans X sujets + image = dans tableau
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum