Background image hover effect outside of containing element

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.