jquery - ui-icon-circle-close の「ui-state-hover」に誤った背景画像が表示される

Question

「閉じる」ボタンを表示するようにjQuery-UIタブ要素を拡張しようとしています。ホバーイベントの外観を変更し、クリックでタブを削除するには、[閉じる] ボタンが必要です。以下のコードはほとんど機能しますが、ホバー時に表示される画像は正しくありません。(デフォルトで正しく表示される 'ui-icon-circle-close' を使用していますが、ホバー イベントでは部分的な画像が正方形に変わります)。残念ながら - スクリーンショットを投稿することはできません - クレジットが不足しているようです :-(.

jQuery v1.8.2 と jQuery UI - v1.10.0 を使用しています。

ここに私のJavaScript関数全体があります

(レポhttp://github.com/andrewwatts/ui.tabs.closableから jQuery 1.8 用の Andrew Watts の元のバージョンを使用し、追加機能を使用して jQuery 1.9 で動作するように拡張しました。)

(function() {
$.widget( "ui.tabs", $.ui.tabs, {
options: {
    spinner: "<em>Loading&#8230;</em>",
    closable: false
},
_create: function() {
    this._super( "_create" );
    this._on({
    tabsbeforeload: function( event, ui ){
        if( !this.options.spinner ) {
        return;
        }
        var span = ui.tab.find( "span" ),
        html = span.html();
        span.html( this.options.spinner );
        ui.jqXHR.complete(function() {
        span.html( html );
        });
    }
    });
},

_removeTab: function( index ) {
    index = this._getIndex( index );
    var options = this.options;
    tab = this.tabs.eq( index ).remove(),
    panel = this._getPanelForTab( tab ).remove();

    if( tab.hasClass( "ui-tabs-active" ) && this.anchors.length > 2 ) {
    this._activate( index + ( index + 1 < this.anchors.length ? 1 : -1 ));
    }
},

_processTabs: function() {
    this._super( "_processTabs" );
    var self = this;
    var lis = this.tablist.children( ":has(a[href])" );

    if (this.options.closable === true) {
    var unclosable_lis = lis.filter(function() {
                return $('.ui-closable-tab', this).length === 0;
    });

    // append the close button and associated events
    unclosable_lis.each(function() {
                $(this)
        .append('<a href="#"><span class="ui-icon ui-icon-circle-close ui-closable-tab"></span></a>')
        .find('a:last .ui-closable-tab')
                    .hover(
                        function() {
            $(this).addClass('ui-state-hover');
                            $(this).css('cursor', 'pointer');
                        },
                        function() {
                            $(this).css('cursor', 'default');
            $(this).removeClass('ui-state-hover');
                        }
                    )
                    .click(function() {
                        var index = lis.index($(this).parent().parent());
                        if (index > -1) {
                            // remove this tab
                            self._removeTab(index);
                        }
                        // don't follow the link
                        return false;
                    })
        .end();
    });
    }
}
});

})(jQuery);

このコードを作成して正しいホバー アイコンを表示する方法はありますか?