Jquery 更改第一个的背景<；td>；（共2<；td'；s>；）在母公司的鼠标上方悬停（鼠标上方）；tr>；

你好，很抱歉我的英语不好

我有一张这样的桌子：

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

table#mytable tr.use:hover  {
    background:url("bg/tr_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");
    });

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

因此，我正在寻找一种jquery解决方案（针对IE7的“bug”），当我将鼠标悬停在父对象“tr”上时，只将背景色设置为第一个“td”。我可以接受的是，只有第一个“td”有背景色，第二个“td”保持空白，因为使用IE7的网站访问者约占3%。

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

您可以使用如下函数：

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

table#mytable tr.use:hover  {
    background:url("bg/tr_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");
    });

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

您可以使用如下函数：

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

table#mytable tr.use:hover  {
    background:url("bg/tr_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");
    });

---

你是不是想给我们看一个桌上的标签而不是车身的标签？你的CSS正试图定位一个表标记。我的错！当然是桌子标签。编辑你是不是想给我们看一个桌上的标签而不是车身的标签？你的CSS正试图定位一个表标记。我的错！当然是桌子标签。编辑这很好用。谢谢你：）！你做得很好，我需要问你是否有可能为第二个“td”设置另一个背景。请记住，如果它解决了你的问题，请记住标记答案谢谢。我明天试试这个，给你/这里一些反馈；）这很好用。谢谢你：）！你做得很好，我需要问你是否有可能为第二个“td”设置另一个背景。请记住，如果它解决了你的问题，请标记答案谢谢。我明天试试这个，给你/这里一些反馈；）