在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>
        );
    }
}

constants.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;
}

关于跨度与类组合的简单示例：hover和：active和on style border选项组合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放置标记，然后在悬停时，可以更改可见性。

你去吧！