更改 CSS 样式 onHover 和 onClick 事件答案

【问题标题】：Changing CSS styling onHover and onClick event更改 CSS 样式 onHover 和 onClick 事件
【发布时间】：2018-03-09 20:41:55
【问题描述】：

在上述任何项目上悬停时，我想用一个灰色背景的框包围项目。

并且 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>
        );
    }
}

【问题讨论】：

您只能使用 HTML 和 CSS 来完成，到目前为止您尝试过什么。网上已经有很多例子了，你能把你的代码展示一下吗？
请张贴代码。最好创建一个 sn-p。
@Peter 你还需要 JS，因为 CSS 中没有点击事件
您可以阅读以下内容：stackoverflow.com/help/how-to-ask 并提出正确的问题。提出问题需要最少的努力。
@MatthiasS。您可以添加隐藏的复选框并使用 :checked 伪类 :)

标签： javascript html css reactjs

【解决方案1】：

尝试使用 :hover 和 :active 的伪类组合。对于客人，它喜欢按钮。在样式边框选项中使用插入和开头的组合，它提供了非常好的视觉效果。

【讨论】：

一个关于 span 的简单例子真的可以帮助我更好地理解。
我的课 HTML 示例//O REDU STYLE.meni-slovo :悬停{背景颜色：米色； } .meni-slavo:active{ 边框：2px inset beige;颜色：紫色； }