Text and background color into a table





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















I have a table and I want that the content of a cell and its background changes the color when the mouse hovers on it. So I have tried the following CSS






td {
background-color: white;
color: black;
}

td:hover {
background-color: black;
color: white;
}

<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>





It seems simple, but it doesn't work. The background change its color, while the text not.



Where is my fault? How can I correct?










share|improve this question















migrated from webmasters.stackexchange.com Nov 22 '18 at 12:26


This question came from our site for pro webmasters.



















  • please provide your html code.

    – Bhoomi patel
    Nov 22 '18 at 12:32






  • 1





    Your code works fine: jsfiddle.net/9tb2L1q0 please can you edit your qiuestion with a Minimal, Complete, and Verifiable example demonstrating your problem as you may have other styles conflicting with the above ones

    – Pete
    Nov 22 '18 at 12:32













  • It's might be cdn issue. check here

    – DPS
    Nov 22 '18 at 12:34













  • Add your html too

    – Viira
    Nov 22 '18 at 12:35











  • @Pete The text into the cell is a link: here jsfiddle.net/9tb2L1q0/3 there's an example of the problem. Trying with a:hover is not good (jsfiddle.net/9tb2L1q0/4) as the string become white only if it is exactly hovered. The aim is to have a cell containing a link that prettily change the color when the mouse hover on the cell, not necessarily the link.

    – Acciaierie Stahlberg
    Nov 22 '18 at 13:03




















1















I have a table and I want that the content of a cell and its background changes the color when the mouse hovers on it. So I have tried the following CSS






td {
background-color: white;
color: black;
}

td:hover {
background-color: black;
color: white;
}

<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>





It seems simple, but it doesn't work. The background change its color, while the text not.



Where is my fault? How can I correct?










share|improve this question















migrated from webmasters.stackexchange.com Nov 22 '18 at 12:26


This question came from our site for pro webmasters.



















  • please provide your html code.

    – Bhoomi patel
    Nov 22 '18 at 12:32






  • 1





    Your code works fine: jsfiddle.net/9tb2L1q0 please can you edit your qiuestion with a Minimal, Complete, and Verifiable example demonstrating your problem as you may have other styles conflicting with the above ones

    – Pete
    Nov 22 '18 at 12:32













  • It's might be cdn issue. check here

    – DPS
    Nov 22 '18 at 12:34













  • Add your html too

    – Viira
    Nov 22 '18 at 12:35











  • @Pete The text into the cell is a link: here jsfiddle.net/9tb2L1q0/3 there's an example of the problem. Trying with a:hover is not good (jsfiddle.net/9tb2L1q0/4) as the string become white only if it is exactly hovered. The aim is to have a cell containing a link that prettily change the color when the mouse hover on the cell, not necessarily the link.

    – Acciaierie Stahlberg
    Nov 22 '18 at 13:03
















1












1








1








I have a table and I want that the content of a cell and its background changes the color when the mouse hovers on it. So I have tried the following CSS






td {
background-color: white;
color: black;
}

td:hover {
background-color: black;
color: white;
}

<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>





It seems simple, but it doesn't work. The background change its color, while the text not.



Where is my fault? How can I correct?










share|improve this question
















I have a table and I want that the content of a cell and its background changes the color when the mouse hovers on it. So I have tried the following CSS






td {
background-color: white;
color: black;
}

td:hover {
background-color: black;
color: white;
}

<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>





It seems simple, but it doesn't work. The background change its color, while the text not.



Where is my fault? How can I correct?






td {
background-color: white;
color: black;
}

td:hover {
background-color: black;
color: white;
}

<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>





td {
background-color: white;
color: black;
}

td:hover {
background-color: black;
color: white;
}

<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>






css html-table colors






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 22 '18 at 13:44









Brian Tompsett - 汤莱恩

4,2671339104




4,2671339104










asked Nov 22 '18 at 12:24









Acciaierie StahlbergAcciaierie Stahlberg

83




83




migrated from webmasters.stackexchange.com Nov 22 '18 at 12:26


This question came from our site for pro webmasters.









migrated from webmasters.stackexchange.com Nov 22 '18 at 12:26


This question came from our site for pro webmasters.















  • please provide your html code.

    – Bhoomi patel
    Nov 22 '18 at 12:32






  • 1





    Your code works fine: jsfiddle.net/9tb2L1q0 please can you edit your qiuestion with a Minimal, Complete, and Verifiable example demonstrating your problem as you may have other styles conflicting with the above ones

    – Pete
    Nov 22 '18 at 12:32













  • It's might be cdn issue. check here

    – DPS
    Nov 22 '18 at 12:34













  • Add your html too

    – Viira
    Nov 22 '18 at 12:35











  • @Pete The text into the cell is a link: here jsfiddle.net/9tb2L1q0/3 there's an example of the problem. Trying with a:hover is not good (jsfiddle.net/9tb2L1q0/4) as the string become white only if it is exactly hovered. The aim is to have a cell containing a link that prettily change the color when the mouse hover on the cell, not necessarily the link.

    – Acciaierie Stahlberg
    Nov 22 '18 at 13:03





















  • please provide your html code.

    – Bhoomi patel
    Nov 22 '18 at 12:32






  • 1





    Your code works fine: jsfiddle.net/9tb2L1q0 please can you edit your qiuestion with a Minimal, Complete, and Verifiable example demonstrating your problem as you may have other styles conflicting with the above ones

    – Pete
    Nov 22 '18 at 12:32













  • It's might be cdn issue. check here

    – DPS
    Nov 22 '18 at 12:34













  • Add your html too

    – Viira
    Nov 22 '18 at 12:35











  • @Pete The text into the cell is a link: here jsfiddle.net/9tb2L1q0/3 there's an example of the problem. Trying with a:hover is not good (jsfiddle.net/9tb2L1q0/4) as the string become white only if it is exactly hovered. The aim is to have a cell containing a link that prettily change the color when the mouse hover on the cell, not necessarily the link.

    – Acciaierie Stahlberg
    Nov 22 '18 at 13:03



















please provide your html code.

– Bhoomi patel
Nov 22 '18 at 12:32





please provide your html code.

– Bhoomi patel
Nov 22 '18 at 12:32




1




1





Your code works fine: jsfiddle.net/9tb2L1q0 please can you edit your qiuestion with a Minimal, Complete, and Verifiable example demonstrating your problem as you may have other styles conflicting with the above ones

– Pete
Nov 22 '18 at 12:32







Your code works fine: jsfiddle.net/9tb2L1q0 please can you edit your qiuestion with a Minimal, Complete, and Verifiable example demonstrating your problem as you may have other styles conflicting with the above ones

– Pete
Nov 22 '18 at 12:32















It's might be cdn issue. check here

– DPS
Nov 22 '18 at 12:34







It's might be cdn issue. check here

– DPS
Nov 22 '18 at 12:34















Add your html too

– Viira
Nov 22 '18 at 12:35





Add your html too

– Viira
Nov 22 '18 at 12:35













@Pete The text into the cell is a link: here jsfiddle.net/9tb2L1q0/3 there's an example of the problem. Trying with a:hover is not good (jsfiddle.net/9tb2L1q0/4) as the string become white only if it is exactly hovered. The aim is to have a cell containing a link that prettily change the color when the mouse hover on the cell, not necessarily the link.

– Acciaierie Stahlberg
Nov 22 '18 at 13:03







@Pete The text into the cell is a link: here jsfiddle.net/9tb2L1q0/3 there's an example of the problem. Trying with a:hover is not good (jsfiddle.net/9tb2L1q0/4) as the string become white only if it is exactly hovered. The aim is to have a cell containing a link that prettily change the color when the mouse hover on the cell, not necessarily the link.

– Acciaierie Stahlberg
Nov 22 '18 at 13:03














2 Answers
2






active

oldest

votes


















1














Ok, links usually have their own hover style applied so you need to target the links in the table to change their colour:






td {
background-color: white;
color: black;
}

td:hover {
background-color: black;
color: white;
}

td:hover a { /* only target links in a td cell that is hovered */
color: white;
}

<table width="150px">
<tr>
<td><a href="www.testing.com">testing</a></td>
</tr>
</table>








share|improve this answer































    0














    Your posted css is not incorrect, but maybe it gets overridden by something else. Try adding important to see if this is the case:



    Also could you post your html as well?






     td {
    background-color: white !important;
    color: black !important;
    }
    td:hover {
    background-color: black !important;
    color: white !important;
    }

    <h2>HTML Table</h2>

    <table>
    <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    </tr>
    <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    </tr>
    <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    </tr>
    <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    </tr>
    <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    </tr>
    <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    </tr>
    <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    </tr>
    </table>








    share|improve this answer
























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53430991%2ftext-and-background-color-into-a-table%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      1














      Ok, links usually have their own hover style applied so you need to target the links in the table to change their colour:






      td {
      background-color: white;
      color: black;
      }

      td:hover {
      background-color: black;
      color: white;
      }

      td:hover a { /* only target links in a td cell that is hovered */
      color: white;
      }

      <table width="150px">
      <tr>
      <td><a href="www.testing.com">testing</a></td>
      </tr>
      </table>








      share|improve this answer




























        1














        Ok, links usually have their own hover style applied so you need to target the links in the table to change their colour:






        td {
        background-color: white;
        color: black;
        }

        td:hover {
        background-color: black;
        color: white;
        }

        td:hover a { /* only target links in a td cell that is hovered */
        color: white;
        }

        <table width="150px">
        <tr>
        <td><a href="www.testing.com">testing</a></td>
        </tr>
        </table>








        share|improve this answer


























          1












          1








          1







          Ok, links usually have their own hover style applied so you need to target the links in the table to change their colour:






          td {
          background-color: white;
          color: black;
          }

          td:hover {
          background-color: black;
          color: white;
          }

          td:hover a { /* only target links in a td cell that is hovered */
          color: white;
          }

          <table width="150px">
          <tr>
          <td><a href="www.testing.com">testing</a></td>
          </tr>
          </table>








          share|improve this answer













          Ok, links usually have their own hover style applied so you need to target the links in the table to change their colour:






          td {
          background-color: white;
          color: black;
          }

          td:hover {
          background-color: black;
          color: white;
          }

          td:hover a { /* only target links in a td cell that is hovered */
          color: white;
          }

          <table width="150px">
          <tr>
          <td><a href="www.testing.com">testing</a></td>
          </tr>
          </table>








          td {
          background-color: white;
          color: black;
          }

          td:hover {
          background-color: black;
          color: white;
          }

          td:hover a { /* only target links in a td cell that is hovered */
          color: white;
          }

          <table width="150px">
          <tr>
          <td><a href="www.testing.com">testing</a></td>
          </tr>
          </table>





          td {
          background-color: white;
          color: black;
          }

          td:hover {
          background-color: black;
          color: white;
          }

          td:hover a { /* only target links in a td cell that is hovered */
          color: white;
          }

          <table width="150px">
          <tr>
          <td><a href="www.testing.com">testing</a></td>
          </tr>
          </table>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 22 '18 at 13:07









          PetePete

          42.3k1879121




          42.3k1879121

























              0














              Your posted css is not incorrect, but maybe it gets overridden by something else. Try adding important to see if this is the case:



              Also could you post your html as well?






               td {
              background-color: white !important;
              color: black !important;
              }
              td:hover {
              background-color: black !important;
              color: white !important;
              }

              <h2>HTML Table</h2>

              <table>
              <tr>
              <th>Company</th>
              <th>Contact</th>
              <th>Country</th>
              </tr>
              <tr>
              <td>Alfreds Futterkiste</td>
              <td>Maria Anders</td>
              <td>Germany</td>
              </tr>
              <tr>
              <td>Centro comercial Moctezuma</td>
              <td>Francisco Chang</td>
              <td>Mexico</td>
              </tr>
              <tr>
              <td>Ernst Handel</td>
              <td>Roland Mendel</td>
              <td>Austria</td>
              </tr>
              <tr>
              <td>Island Trading</td>
              <td>Helen Bennett</td>
              <td>UK</td>
              </tr>
              <tr>
              <td>Laughing Bacchus Winecellars</td>
              <td>Yoshi Tannamuri</td>
              <td>Canada</td>
              </tr>
              <tr>
              <td>Magazzini Alimentari Riuniti</td>
              <td>Giovanni Rovelli</td>
              <td>Italy</td>
              </tr>
              </table>








              share|improve this answer




























                0














                Your posted css is not incorrect, but maybe it gets overridden by something else. Try adding important to see if this is the case:



                Also could you post your html as well?






                 td {
                background-color: white !important;
                color: black !important;
                }
                td:hover {
                background-color: black !important;
                color: white !important;
                }

                <h2>HTML Table</h2>

                <table>
                <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
                </tr>
                <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
                <td>Germany</td>
                </tr>
                <tr>
                <td>Centro comercial Moctezuma</td>
                <td>Francisco Chang</td>
                <td>Mexico</td>
                </tr>
                <tr>
                <td>Ernst Handel</td>
                <td>Roland Mendel</td>
                <td>Austria</td>
                </tr>
                <tr>
                <td>Island Trading</td>
                <td>Helen Bennett</td>
                <td>UK</td>
                </tr>
                <tr>
                <td>Laughing Bacchus Winecellars</td>
                <td>Yoshi Tannamuri</td>
                <td>Canada</td>
                </tr>
                <tr>
                <td>Magazzini Alimentari Riuniti</td>
                <td>Giovanni Rovelli</td>
                <td>Italy</td>
                </tr>
                </table>








                share|improve this answer


























                  0












                  0








                  0







                  Your posted css is not incorrect, but maybe it gets overridden by something else. Try adding important to see if this is the case:



                  Also could you post your html as well?






                   td {
                  background-color: white !important;
                  color: black !important;
                  }
                  td:hover {
                  background-color: black !important;
                  color: white !important;
                  }

                  <h2>HTML Table</h2>

                  <table>
                  <tr>
                  <th>Company</th>
                  <th>Contact</th>
                  <th>Country</th>
                  </tr>
                  <tr>
                  <td>Alfreds Futterkiste</td>
                  <td>Maria Anders</td>
                  <td>Germany</td>
                  </tr>
                  <tr>
                  <td>Centro comercial Moctezuma</td>
                  <td>Francisco Chang</td>
                  <td>Mexico</td>
                  </tr>
                  <tr>
                  <td>Ernst Handel</td>
                  <td>Roland Mendel</td>
                  <td>Austria</td>
                  </tr>
                  <tr>
                  <td>Island Trading</td>
                  <td>Helen Bennett</td>
                  <td>UK</td>
                  </tr>
                  <tr>
                  <td>Laughing Bacchus Winecellars</td>
                  <td>Yoshi Tannamuri</td>
                  <td>Canada</td>
                  </tr>
                  <tr>
                  <td>Magazzini Alimentari Riuniti</td>
                  <td>Giovanni Rovelli</td>
                  <td>Italy</td>
                  </tr>
                  </table>








                  share|improve this answer













                  Your posted css is not incorrect, but maybe it gets overridden by something else. Try adding important to see if this is the case:



                  Also could you post your html as well?






                   td {
                  background-color: white !important;
                  color: black !important;
                  }
                  td:hover {
                  background-color: black !important;
                  color: white !important;
                  }

                  <h2>HTML Table</h2>

                  <table>
                  <tr>
                  <th>Company</th>
                  <th>Contact</th>
                  <th>Country</th>
                  </tr>
                  <tr>
                  <td>Alfreds Futterkiste</td>
                  <td>Maria Anders</td>
                  <td>Germany</td>
                  </tr>
                  <tr>
                  <td>Centro comercial Moctezuma</td>
                  <td>Francisco Chang</td>
                  <td>Mexico</td>
                  </tr>
                  <tr>
                  <td>Ernst Handel</td>
                  <td>Roland Mendel</td>
                  <td>Austria</td>
                  </tr>
                  <tr>
                  <td>Island Trading</td>
                  <td>Helen Bennett</td>
                  <td>UK</td>
                  </tr>
                  <tr>
                  <td>Laughing Bacchus Winecellars</td>
                  <td>Yoshi Tannamuri</td>
                  <td>Canada</td>
                  </tr>
                  <tr>
                  <td>Magazzini Alimentari Riuniti</td>
                  <td>Giovanni Rovelli</td>
                  <td>Italy</td>
                  </tr>
                  </table>








                   td {
                  background-color: white !important;
                  color: black !important;
                  }
                  td:hover {
                  background-color: black !important;
                  color: white !important;
                  }

                  <h2>HTML Table</h2>

                  <table>
                  <tr>
                  <th>Company</th>
                  <th>Contact</th>
                  <th>Country</th>
                  </tr>
                  <tr>
                  <td>Alfreds Futterkiste</td>
                  <td>Maria Anders</td>
                  <td>Germany</td>
                  </tr>
                  <tr>
                  <td>Centro comercial Moctezuma</td>
                  <td>Francisco Chang</td>
                  <td>Mexico</td>
                  </tr>
                  <tr>
                  <td>Ernst Handel</td>
                  <td>Roland Mendel</td>
                  <td>Austria</td>
                  </tr>
                  <tr>
                  <td>Island Trading</td>
                  <td>Helen Bennett</td>
                  <td>UK</td>
                  </tr>
                  <tr>
                  <td>Laughing Bacchus Winecellars</td>
                  <td>Yoshi Tannamuri</td>
                  <td>Canada</td>
                  </tr>
                  <tr>
                  <td>Magazzini Alimentari Riuniti</td>
                  <td>Giovanni Rovelli</td>
                  <td>Italy</td>
                  </tr>
                  </table>





                   td {
                  background-color: white !important;
                  color: black !important;
                  }
                  td:hover {
                  background-color: black !important;
                  color: white !important;
                  }

                  <h2>HTML Table</h2>

                  <table>
                  <tr>
                  <th>Company</th>
                  <th>Contact</th>
                  <th>Country</th>
                  </tr>
                  <tr>
                  <td>Alfreds Futterkiste</td>
                  <td>Maria Anders</td>
                  <td>Germany</td>
                  </tr>
                  <tr>
                  <td>Centro comercial Moctezuma</td>
                  <td>Francisco Chang</td>
                  <td>Mexico</td>
                  </tr>
                  <tr>
                  <td>Ernst Handel</td>
                  <td>Roland Mendel</td>
                  <td>Austria</td>
                  </tr>
                  <tr>
                  <td>Island Trading</td>
                  <td>Helen Bennett</td>
                  <td>UK</td>
                  </tr>
                  <tr>
                  <td>Laughing Bacchus Winecellars</td>
                  <td>Yoshi Tannamuri</td>
                  <td>Canada</td>
                  </tr>
                  <tr>
                  <td>Magazzini Alimentari Riuniti</td>
                  <td>Giovanni Rovelli</td>
                  <td>Italy</td>
                  </tr>
                  </table>






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 22 '18 at 12:52









                  WimanicesirWimanicesir

                  668212




                  668212






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53430991%2ftext-and-background-color-into-a-table%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      How to pass form data using jquery Ajax to insert data in database?

                      National Museum of Racing and Hall of Fame

                      Guess what letter conforming each word