jquery - ブラウザー固有のテーブル列の並べ替えアイコン

Question

初めてではありませんが、IE8 で少し CSS の問題が発生しています。私は正常に動作するソート可能なテーブルを持っています。並べ替えヘッダー列の背景として表示される方向アイコンがあり、列が昇順または降順で並べ替えられているかどうかによって変化します。問題は、IE のみで、マウス カーソルがヘッダーから離れるまでアイコンが更新されないことです。

そのため、ポインタが列ヘッダーの上にある間は元のアイコンのままで、移動すると正しいアイコンが表示されます。

ヘッダーに関連付けられた「ホバー」イベントはありませんが、そのための css があります。

css は次のようになります。

.costtable th {
    cursor: pointer;
}
th[order='ascending'] {
    background-image: url(../images/down.png);
    background-position: right;
    background-repeat: no-repeat;
}
th[order='descending'] {
    background-image: url(../images/up.png);
    background-position: right;
    background-repeat: no-repeat;
}

アイコンを設定するスクリプトの部分は次のようになります。

$table.find('thead th').removeAttr('order');
$table.find('thead th:nth-child(' + columnNumber + ')').attr('order',ascOrDesc);

誰かが指摘する前にnth-child、IE8 では css がサポートされていないことを知っていますが、jQuery では機能します。