Changer couleur texte ET background au survol d'une cellule

Résolu
Bonjour à tous,

Je suis à la recherche de la façon de faire la chose suivante en CSS
Lorsque je survole la cellule (qui contient un lien), le fond change de couleur et que la couleur du texte change également.

Plus précisément, J'ai une cellule à fond blanc et à texte orange. Je voudrait que lorsque je survole cette cellule le fond (background) devienne orange et le texte blanc.

Est-il possible de faire cela?

Merci de votre aide

7 réponses

  1. salut
    tu peux mettre le bout de code concerné stp ?
    quand tu dis cellule je sais pas si tu parles de DIV ou de TD
    merci
    0
    1. Salut,

      Tu peux faire comme ça avec un DIV. Voilà un exemple

      <div id="ccm"/>
      <p>Shay</p>
      </div>

      et dans le css

      #ccm p:hover
      {
      color: #FFF;
      background: #FF0000;
      }
      Passionné d'informatique et de jeux vidéos.
      0
      1. Merci de vos réponses,

        Voici le bout de code concerné:

        <table class="ms-rteTable-0" cellspacing="0" cellpadding="5" style="width: 670px; height: 27px; font-size: 1em">
        <tbody>
        <tr class="ms-rteTableEvenRow-0">
        
        <td class="ms-rteTableOddCol-0"><a href="link">Téléphonie?</a></td>
        
        <td class="ms-rteTableOddCol-0"><a href="/link">Téléconférence</a>?</td>
        
        </tr>
        </tbody>
        </table>
        
        


        J'aimerais de préférence appliquer le style à une cellule précise de tableau (td).

        Est-ce qu'en appliquant une classe c'est faisable?
        0
        1. Salut

          il faut ajouter une classe sur le TD concerné, exemple :

          <table class="ms-rteTable-0" cellspacing="0" cellpadding="5" style="width: 670px; height: 27px; font-size: 1em">
          <tbody>
          <tr class="ms-rteTableEvenRow-0">

          <td class="ms-rteTableOddCol-0 orange"><a href="link">Téléphonie?</a></td>

          <td class="ms-rteTableOddCol-0"><a href="/link">Téléconférence</a>?</td>

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

          et dans le style, mettre ca :

          td.orange{
          background-color:#FFF;
          }
          td.orange a{
          color:#FF6600;
          }
          td.orange:hover{
          background-color:#FF6600;
          }
          td.orange:hover a{
          color:#FFF;
          }

          a+
          1
          1. Merci ça m'aide grandement, seulement j'ai encore un problème qui subsiste.

            Lorsque je survole ma cellule, le texte ne se transforme pas en blanc. J'obtiens donc une belle case orange mais pas de texte..

            Pourtant j'ai bien mis:

            td.orange:hover a{
            color:#FFF;
            }

            Savez-vous ce qui ne marche pas?
            0
            1. essaie d'ajouter un !important

              td.orange:hover a{
              color:#FFF !important;
              }

              si ca marche pas est ce que la page en questiin est accessible en ligne ? si oui quelle est l'url ?
              1
              1. Super Waelb83!!

                Merci beaucoup pour ton aide précieuse ça marche à merveille maintenant!!
                0