更改CSS样式onHover和onClick事件

Question

在悬停任何上述项目时，我想用一个带有灰色背景的框环绕项目。

和onclick我想将其更改为类似下面的内容（使用背景颜色作为文本颜色的框环绕，将文本颜色更改为白色并在框中包含x）。单击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。对于客人，它喜欢按钮。 在样式边框选项中使用插入和开始的组合，它提供了非常好的内容。