Background image hover effect outside of containing element

[pregnancy-symptoms]

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.

Any ideas?JS:\[code\]$(function() { $(".table-row").hover(function() { $(this).addClass("highlight"); }, function() { $(this).removeClass("highlight"); })})\[/code\]CSS:\[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\]HTML:\[code\]<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>\[/code\]