最初の背景を変更する​​（of 2 <td's>）の親をホバリング（mousover）する<tr>

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"に設定します。だから、バックグラウンドイメージが繰り返しているように見える - x 2回。

だから私は、親 "tr"をホバーすると、最初の "td"に背景色だけを設定するためのjqueryソリューション（そのIE7 "バグ"用）を探しています。最初の「td」だけが背景色を取得し、2番目の「td」が空白のままで生活することができます。IE7を使用している私たちのウェブサイト訪問者は約3％です。

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を管理するために、同様のCSSを持っ

Answer 1

。これは、おそらく最高ではない方法です。たぶん、このアプローチは、より良いです：

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