javascript - 应用样式 onHover 和 onClick

Question

我想要 onHover 和 onClick 效果。寻找具有专业 CSS 样式的简洁优雅的解决方案。

要求:悬停在上述任何元素上时，我想用灰色背景框包围元素。

和 onclick 我想用一个背景颜色作为文本颜色的框包围，将文本颜色更改为白色并在框中有一个 x(交叉/关闭)。单击 x 应将其恢复到图中所示的正常状态。

当前代码:

 export default class Summary 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>
        );
    }
}

常量.js

export const JOB_STATES_CSS_CLASS = {
    [FAILED]: 'state-failed',
    [RUNNING]: 'state-running',
    [COMPLETED]: 'state-completed'
};

CSS:

.state-failed {
   color: red;
}

.state-running {
  color: green;
}

.state-completed {
  color: #999999;
}

一个关于 span 与 :hover 和 :active 的类组合以及 inset 和 outset 的样式边框选项组合的简单示例将真正帮助我完成这项工作。请帮助这个例子。

Answer 1

在使用 css 时，你可以使用类似的东西

.my-class:hover {'background' : 'red'}; // for hover functionality
.my-other-class:active {'background':'yellow'} // for click functionality

这里不需要任何 javascript。但是要添加 x 标记，您可以将标记设置为 visibility : hidden，然后在悬停时，您可以更改可见性。

给你!