title: Trying to highlight table row using JQuery but not working, can anyone tell me why and how to fix it?
body: <p>Trying to hightlight table row using JQuery but not working, can anyone tell me why and how to fix it?</p>
  
  <p>table:</p>
  
  <pre><code>&lt;table id="customers"&gt;
      &lt;caption&gt;Customers&lt;/caption&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Customer no&lt;/th&gt;
              &lt;th&gt;Last name&lt;/th&gt;
              &lt;th&gt;First name&lt;/th&gt;
              &lt;th&gt;Options&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="alt"&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;Jackson&lt;/td&gt;
              &lt;td&gt;Simon&lt;/td&gt;
              &lt;td&gt;
                  &lt;div class="align-left"&gt;
                      &lt;input type="submit" name="View" id="view" value="View" /&gt;
                  &lt;/div&gt;
                  &lt;div class="align-right"&gt;
                      &lt;input type="submit" name="Rent" id="rent" value="Wants to rent" /&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="alt"&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;Miller&lt;/td&gt;
              &lt;td&gt;Darren&lt;/td&gt;
              &lt;td&gt;
                  &lt;div class="align-left"&gt;
                      &lt;input type="submit" name="View" id="view" value="View" /&gt;
                  &lt;/div&gt;
                  &lt;div class="align-right"&gt;
                      &lt;input type="submit" name="Rent" id="rent" value="Wants to rent" /&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>    $("#customers tbody tr").hover(
  
      function () {
          $(this).css({
              background: 'yellow'
          });
      },
  
      function () {
          $(this).css("background", "");
      });
  </code></pre>
  
  <p>What happens is the table row does not get highlighted when hovering over it, please also note that it works for a td when i adjust the selector, just wont work for tr row.</p>
  
  <p>css:</p>
  
  <pre><code>    ...
      /* table data style */
  
      table {
  
          border-collapse: collapse;    
          width: 400px;
          color: grey;
          font-family: sans-serif;
  
      }
  
      th, td {
  
          border-bottom: 1px solid brown;
          padding: 5px;
          background-color: seashell;
          text-align: left;    
  
      }
  
      th {
  
          width: 200px;
  
      }
  
      td {
  
          width: 200px;
  
      }
  
      tr.alt td, tr.alt th {
  
          background-color: white;
  
      }
  
      tr:last-child td, tr:last-child th {
  
          border-bottom: 0;
  
      }
  
      caption {
  
          font-weight: bold;
          padding-bottom: 5px;
  
      }
  
      .main-font {
  
          font-family: sans-serif;
  
      }
  </code></pre>