Applying hover background color to non-active sheet tabs in SpreadJS

When attempting to apply a hover background color to non-active sheet tabs in SpreadJS, targeting the gc-tab-hover CSS class may appear to work for text color but not for background-color. This behavior is expected and not supported from SpreadJS.

SpreadJS provides a dedicated Sheet Tab Styles API for customizing sheet tab appearance based on state (such as active and hover). Background styling for hover states must be applied using this API. At this time, the only sheet tab property that can be controlled through CSS is the border radius, as documented.

The following example applies a hover background color to non-active sheet tabs only and updates the styles whenever the active sheet changes.

initSheetTabStyles() {
    const spread = this.spread;
    const spreadNS = GC.Spread.Sheets;

    const hoverStyle = { backColor: "#7fb0ff", foreColor: "#ffffff" };
    const activeStyle = { backColor: "#ffffff", foreColor: "#000000" };

    spread.options.defaultSheetTabStyles = {
        [spreadNS.SheetTabState.active]: activeStyle
    };

    const updateSheetTabStyles = () => {
        const activeIndex = spread.getActiveSheetIndex();
        const sheetCount = spread.getSheetCount();

        spread.sheetTabStyles.clear();

        for (let i = 0; i < sheetCount; i++) {
            const sheet = spread.getSheet(i);
            const name = sheet.name();

            if (i !== activeIndex) {
                spread.sheetTabStyles.add(
                    spreadNS.SheetTabState.hover,
                    hoverStyle,
                    [name]
                );
            }
        }
    };

    updateSheetTabStyles();

    spread.bind(
        spreadNS.Events.ActiveSheetChanged,
        updateSheetTabStyles
    );
}

initSpread(spread) {
    this.spread = spread;
    this.initSheetTabStyles();
}

If you want sheet tabs to be styled differently based on their state, you can refer to the Sheet Tab Styles demo.