Background image hover effect outside of containing element - css

Question

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.
View image http://www.weiserwebworld.com/images/view.gif
Any ideas?
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>

Answer 1

First, throw away this:
$(function() {
$(".table-row").hover(function() {
$(this).addClass("highlight");
}, function() {
$(this).removeClass("highlight");
})
})
It is an abomination.
Then change the CSS selector .highlight to .table-row:hover. As you clearly don't care about IE6 (where :hover only worked on a elements), there's nothing wrong with using :hover.
Now to the rest of the problem.
The technique that I would use for this is the before or after pseudo-element. Something like this:
.table-row {
position: relative; /* So that the position: absolute on the "click to view" makes it relative to the table row */
}
.table-row:hover:after {
position: absolute;
left: -80px; /* Adjust as desired */
content: url(click-to-view.png); /* This makes it an image */
}
There's plenty of tweaking that can be done with this, but that's the general idea. No demo on jsfiddle as I can't be bothered doing the table structure or getting an image for it.

Answer 2

You can do this in pure CSS.
This is quick and dirty, you'll have to tweak it to how you want, but the general idea is:
If you give your row an id () you can add a CSS styles like this:
.overlay {
display: none;
position: absolute;
left: -30px; //makes it appear left of box, even though it's technically "in" box.
}
#table-row1:hover .overlay {
display; block; //Causes div to appear.
}
Now, simply add with the image you want, that will appear as you roll over the row.
Note that the class=overlay div MUST be placed INSIDE of the id=table-row1 div or the hover-appear will not work!
I would also recommend redoing this using tags with the same :hover approach, as your current method of divs with table properties could get unwieldy very fast.

Answer 3

You need to put your image in a DIV, then position the DIV relative to the row. Backgrounds cannot go outside the boundary of their container.