在hover和onClick上应用样式 [英] Applying styles onHover and onClick

问题描述

我想要onHover和onClick效果。寻找专业的css造型整洁优雅的解决方案。

I want onHover and onClick effects on this. Looking for neat and elegant solution with professional css styling.

要求：在悬停任何上面的项目我想用灰色背景的框包围项目。

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

和onclick我想用背景颜色作为文本颜色的框包围，将文本颜色更改为白色，并在箱子中有斧头（交叉/解雇）。点击x应该使其恢复到正常状态，如图所示。

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

当前代码：

 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

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插入和开始的样式边框选项组合将真正帮助我实现这个工作。请帮助这个例子。

A simple example on span with class combination of :hover and :active and on style border option combination of inset and outset would really help me to get this working. Please help with this example.

推荐答案

使用css时，你可以使用像

While using css, you can use something like

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

这里不需要任何javascript。
但要添加 x 标记，您可以将标记置于 visibility：hidden ，然后打开悬停，你可以改变能见度。

No need of any javascript here. But to add you x mark, you can place your mark with visibility : hidden, and then on hover, you can change the visibility.

你去！

这篇关于在hover和onClick上应用样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！