title: Applying styles onHover and onClick
body: <p><a href="https://i.stack.imgur.com/Yxo4j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yxo4j.png" alt="enter image description here"></a>   </p>
  
  <p>I want onHover and onClick effects on this. Looking for neat and elegant solution with professional css styling. </p>
  
  <p><a href="https://i.stack.imgur.com/8oUxL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8oUxL.png" alt="enter image description here"></a> </p>
  
  <p>Requirement: On hover of any of the above items I want to surround item with a box having grey color background.</p>
  
  <p>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.</p>
  
  <p>Current Code:</p>
  
  <pre><code> 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) &amp;&amp;
                      this.props.jobStateCount.get(state) !== 0) {
                      const cssClass = `${JOB_STATES_CSS_CLASS[state]} clickable`;
                      jobCountSummaryDiv.push(
                          &lt;span
                            className={cssClass}
                            role="link"
                            tabIndex="-1"
                            key={state}
                          &gt;
                              {JOB_STATE_DISPLAY_NAME[state]}: {this.props.jobStateCount.get(state)}
                          &lt;/span&gt;
                      );
                      jobCountSummaryDiv.push(' | ');
                  }
              }
          }
          return jobCountSummaryDiv;
      }
  
      render() {
          return (
              &lt;div className="summary-panel"&gt;
                  { this.renderJobStateSummary() }
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>constants.js</p>
  
  <pre><code>export const JOB_STATES_CSS_CLASS = {
      [FAILED]: 'state-failed',
      [RUNNING]: 'state-running',
      [COMPLETED]: 'state-completed'
  };
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.state-failed {
     color: red;
  }
  
  .state-running {
    color: green;
  }
  
  .state-completed {
    color: #999999;
  }
  </code></pre>
  
  <p>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.</p>