更改 onHover 和 onClick 事件的 CSS 樣式

Question

在懸停上述任何項目時，我想用一個具有灰色背景的框圍繞項目。

和 onclick 我想將其更改為如下所示的內容（用背景顏色作為文本顏色的框包圍，將文本顏色更改為白色並在框中放置 ax）。 單擊 x 應使其恢復到正常狀態，如圖 1 所示。

當前代碼：

export default class GridSummary extends Component {

    renderJobStateSummary() {
        const jobCountSummaryDiv = [];
        if (this.props.jobStateCount.size !== 0) {
            jobCountSummaryDiv.push('Summary: ');
            for (const state of ['Total', ...jobStatesPriorityOrder]) {
                if (this.props.jobStateCount.has(state) &&
                    this.props.jobStateCount.get(state) !== 0) {
                    const cssClass = `${JOB_STATES_CSS_CLASS[state]} clickable`;
                    jobCountSummaryDiv.push(
                        <span
                          className={cssClass}
                          role="link"
                          tabIndex="-1"
                          key={state}
                        >
                            {JOB_STATE_DISPLAY_NAME[state]}: {this.props.jobStateCount.get(state)}
                        </span>
                    );
                    jobCountSummaryDiv.push(' | ');
                }
            }
        }
        return jobCountSummaryDiv;
    }

    render() {
        return (
            <div className="summary-panel">
                { this.renderJobStateSummary() }
            </div>
        );
    }
}

Answer 1

嘗試使用 :hover 和 :active 的偽類組合。 對於客人，它喜歡按鈕。 在樣式邊框選項中使用 inset 和 outset 的組合，它提供了非常好的視覺效果。