Hiệu ứng di chuột hình ảnh bên ngoài phần tử có chứa

Question

Tôi đang cố gắng áp dụng hiệu ứng di chuột hình ảnh trên mỗi hàng trong bảng css nhưng cần nó xuất hiện ở bên trái phần tử chứa.

View image http://www.weiserwebworld.com/images/view.gif

Bất kỳ ý tưởng nào?

JS:

$(function() { 
    $(".table-row").hover(function() { 
     $(this).addClass("highlight"); 
    }, function() { 
     $(this).removeClass("highlight"); 
    }) 
}) 

CSS:

#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; 

} 

HTML:

<div id="container"> 
    <div class="table"> 
     <div class="table-row"> 
      <div class="table-cell">Ralph Kramden</div> 
      <div class="table-cell">Truck Driver</div> 
      <div class="table-cell">8/17/2010</div> 
      <div class="table-cell">N/A</div> 
     </div> 
     <div class="table-row"> 
      <div class="table-cell">Ralph Kramden</div> 
      <div class="table-cell">Truck Driver</div> 
      <div class="table-cell">8/17/2010</div> 
      <div class="table-cell">N/A</div> 
     </div> 
    </div> 
</div>