title: HTML change table cell background AND text font colour on hover AT THE SAME TIME
body: <p>NEWBIE: I'm currently working on a 1and1 website. I want different boxes on a main page which all link to different sub-pages. Each box comprises an image and "category" text below image. I used tables within a table to create the boxes because of the borders. I have also added a hover effect so when you mouse-over any of those boxes/tables, the background changes colour.  What I would like to do is have the text change colour AT THE SAME TIME as the box changing colour.  I should point out that I know ABSOLUTELY NOTHING about CSS and very little about HTML, so a working example would make my day! Thanks in advance.  Here's what I've cobbled together so far:</p>
  
  <pre><code>&lt;table border="0" cellpadding="10" cellspacing="10" style="width: 685px;"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;table bgcolor="#F7F7F3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" onmouseout="this.bgColor='#f7f7f3'" onmouseover="this.bgColor='#89A6A1'; this.style.color='black'" style="width: 100%; color: black;"&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                          &lt;p&gt;&lt;a href=""&gt;&lt;img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /&gt;&lt;/a&gt;&lt;/p&gt;
  
                          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
                          &lt;p&gt;&lt;strong&gt;&lt;span style="color:#89A6A1;"&gt;Category&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;table bgcolor="#f7f7f3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" onmouseout="this.bgColor='#f7f7f3'" onmouseover="this.bgColor='#89A6A1'" style="width: 100%;"&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                          &lt;p&gt;&lt;a href=""&gt;&lt;img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /&gt;&lt;/a&gt;&lt;/p&gt;
  
                          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
                          &lt;p&gt;&lt;strong&gt;&lt;span style="color:#89A6A1;"&gt;Category&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;table bgcolor="#f7f7f3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" onmouseout="this.bgColor='#f7f7f3'" onmouseover="this.bgColor='#89A6A1'" style="width: 100%;"&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                          &lt;p&gt;&lt;a href=""&gt;&lt;img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /&gt;&lt;/a&gt;&lt;/p&gt;
  
                          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
                          &lt;p&gt;&lt;strong&gt;&lt;span style="color:#89A6A1;"&gt;Category&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>