Changing CSS styling onHover and onClick event

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 a x 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>
        );
    }
}

You can do it with HTML and CSS only, what have you tried so far. There are plenty of examples of the Internet already, can you show your code so far? — Peter, Sep 28 '17 at 07:36
@Peter you would also need JS, since there is no click event in CSS — Matthias Seifert, Sep 28 '17 at 07:38
You can read this: https://stackoverflow.com/help/how-to-ask and ask a proper question. Asking a question involves a minimum of effort. — user5014677, Sep 28 '17 at 07:38
@MatthiasS. that is wrong. [There is a html+css way of click event](https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css#answer-32721572). — Huelfe, Sep 28 '17 at 07:40
@MatthiasS. you can add hidden checkboxes and use :checked pseudo-class :) — Walk, Sep 28 '17 at 07:40

score 1 · Accepted Answer · answered Sep 28 '17 at 08:27

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.

answered Sep 28 '17 at 08:27

Azer Omerika

26
2

A simple example on span would really help me to understand better. – ThinkGeek Sep 28 '17 at 17:14
1

SAMPLE FROM MY LESSON HTML//O REDU STYLE.meni-slovo :hover{ background-color:beige; } .meni-slovo:active{ border: 2px inset beige; color:purple; } – Azer Omerika Sep 29 '17 at 07:14

Changing CSS styling onHover and onClick event

1 Answers1