Question

Hello and sorry for my bad english!

I have a table like this:

<table id="mytable">
   <tr class="use">
      <td class="ftd"></td>
      <td></td>
   </tr>
   <tr class="use">
      <td class="ftd"></td>
      <td></td>
   </tr>
   <tr class="use">
      <td class="ftd"></td>
      <td></td>
   </tr>
</table>

and a css code like this:

table#mytable tr.use:hover  {
    background:url("bg/tr_bg.png");
    cursor:pointer;
}

It works fine in the IE8-IE9 and Firefox but in IE7 it set the background(image) not to the “tr” but to both “td”. So it looks like the background-image is repeating-x 2-times.

So Im looking for a jquery solution (for that IE7 “bug”) to set only a background-color to the first “td” when I hover the parent “tr”. I can live with the thing that only the first “td” get a background-color and the second “td” stay blank, cause our website visitors that using IE7 are about 3%.

Answer 1

Having a similar CSS:

table#mytable tr.use td.tdHovered  {
    background:url("bg/tr_bg.png");
    cursor:pointer;
}

table#mytable tr.use td.otherTdHovered  {
    background:url("bg/tr_other_bg.png");
    cursor:pointer;
}

You can use a function like this:

$("#mytable tr.use").hover(
    function() { 
        $(this).find("td:first").addClass("tdHovered");
        $(this).find("td:last").addClass("otherTdHovered");
    },
    function() { 
        $(this).find("td:first").removeClass("tdHovered");
        $(this).find("td:last").removeClass("otherTdHovered");
    });

UPDATED: to manage the last column bg. This is A WAY, probably not the best. Maybe this approach is better:

table#mytable tr.use.hovered td  {
    background:url("bg/tr_other_bg.png");
    cursor:pointer;
}

table#mytable tr.use.hovered td.ftd  {
    background:url("bg/tr_bg.png");
    cursor:pointer;
}

and js:

$("#mytable tr.use").hover(
    function() { 
        $(this).addClass("hovered");
    },
    function() { 
        $(this).removeClass("hovered");
    });