title: Background image hover effect outside of containing element
body: <p>I am trying to apply a background image hover effect on each row in my css table but need it to appear to the left of the containing element.</p>
  
  <p><a href="http://www.weiserwebworld.com/images/view.gif" rel="nofollow noreferrer">View image http://www.weiserwebworld.com/images/view.gif</a></p>
  
  <p>Any ideas?</p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(function() {
      $(".table-row").hover(function() { 
          $(this).addClass("highlight");
      }, function() {
          $(this).removeClass("highlight");
      })
  })
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#container {
      width: 660px; 
      margin: 20px auto;
  }
  
  div .table {
      display: table;
      border: 1px red solid;  
  }
  div .table-row {
      display: table-row;
  }
  div .table-cell {
      display: table-cell;
      width: 145px;
      padding: 10px;
      vertical-align: top;
  
  }
  .highlight {
      cursor: pointer;
      background-image: url('click-to-view.png');
      background-position: 0 center;
      background-repeat: no-repeat;
  
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="table"&gt;
          &lt;div class="table-row"&gt;
              &lt;div class="table-cell"&gt;Ralph Kramden&lt;/div&gt;
              &lt;div class="table-cell"&gt;Truck Driver&lt;/div&gt;
              &lt;div class="table-cell"&gt;8/17/2010&lt;/div&gt;
              &lt;div class="table-cell"&gt;N/A&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="table-row"&gt;
              &lt;div class="table-cell"&gt;Ralph Kramden&lt;/div&gt;
              &lt;div class="table-cell"&gt;Truck Driver&lt;/div&gt;
              &lt;div class="table-cell"&gt;8/17/2010&lt;/div&gt;
              &lt;div class="table-cell"&gt;N/A&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>