在悬停（鼠标悬停）父 <tr> 时更改第一个 <td> （共 2 个 <tds> ）的背景

Question

你好，对不起我的英语不好！

我有一张这样的桌子：

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

还有这样的css代码：

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

它在 IE8-IE9 和 Firefox 中运行良好，但在 IE7 中它将背景（图像）设置为“tr”而不是“td”。所以看起来背景图像重复了 2 次。

所以我正在寻找一个 jquery 解决方案（针对那个 IE7“错误”），当我将父级“tr”悬停时，只为第一个“td”设置背景颜色。我可以忍受只有第一个“td”有背景色，第二个“td”保持空白，因为我们的网站访问者使用 IE7 的比例约为 3%。

Answer 1

有类似的 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;
}

你可以使用这样的函数：

$("#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");
    });

更新：管理最后一列 bg。这是一种方式，可能不是最好的。也许这种方法更好：

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

和js：

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