title: Selecting a <td> within a table, li, ul and div to change the background colors
body: <p>I am trying to access the following td 'dayContent' and change the background color to #a43802. I have tried several ways with no success.  </p>
  
  <p>This td exists within a tr and table, which is surrounded by a div, a li, a ul and then another div. :(   </p>
  
  <p>The content for the dayContent is generated from my backend code.  Currently, if you mouseover the Column, the header background changes color which is the proper behavior.  </p>
  
  <p>However, I haven't been able to select the 'individual' .dayContent items to change the background color, instead it changes ALL the .dayContent background colors in the column. </p>
  
  <p>The desired effect is for the column header's background color to change and the current .dayContent that is mousedover should also change the background color. I've tried accessing the <code>&lt;p&gt;</code> but it does the same thing and changes the background color to all the <code>&lt;p&gt;</code> in the column.</p>
  
  <p>Soo....can anyone point me in the right direction? My brain hurts.</p>
  
  <h2>JQUERY CODE:</h2>
  
  <pre><code>        $('#columnDay1').css('cursor', 'pointer');
          $('#columnDay1').mouseover(function () {
              $('td.calendarHeader', this).css("background-color", "#a43802");
          });
          $('#columnDay1').mouseout(function () {
              $('td.calendarHeader', this).css("background-color", "#37322e");
          });
          $('#testSpot').mouseover(function () {
              $('td.dayContent', this).css("background-color", "#a43802");
          });
          $('#testSpot').mouseout(function () {
              $('td.dayContent', this).css("background-color", "White");
          });
  </code></pre>
  
  <h2>HTML CODE:</h2>
  
  <pre><code>    &lt;tr&gt;
          &lt;td class='dayContentImage' height='174' Width='187' BACKGROUND='/Images/day1_10am.jpg'&gt;&lt;p&gt;&lt;span class='dayContentImageDay'&gt;10&lt;/span&gt;AM&lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='dayContent'&gt;&lt;p id='testSpot'&gt;&lt;span class='dayContentDay'&gt;6&lt;/span&gt;PM&lt;br /&gt;Content&lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='dayContent'&gt;&lt;p id='testSpot'&gt;&lt;span class='dayContentDay'&gt;6&lt;/span&gt;PM&lt;br /&gt;Content&lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='dayContentImage' height='173' Width='187' BACKGROUND='/Images/day1_7pm.jpg'&gt;&lt;p&gt;&lt;span class='dayContentImageDay'&gt;7&lt;/span&gt;PM&lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='dayContent'&gt;&lt;p id='testSpot'&gt;&lt;span class='dayContentDay'&gt;9&lt;/span&gt;PM&lt;br /&gt;Content&lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt;
  </code></pre>
  
  <p>Thanks.</p>