更改 onHover 和 onClick 事件的 CSS 样式

Question

On hover of any of the above items I want to surround item with a box having grey color background.

and onclick I want to change it to something like below (surround with a box having background color as text color, change text color to white and have ax in the box). Clicking on x should bring it back to the normal state as depicted in image 1.

Current code:

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

Try with pseudo class combination of :hover and :active. For guest it likes button. In style border option use combination of inset and outset, it gives very good visuel.