0

I am mapping a data and sends to the component where it passes different colors for the background of the icon. But I want to change the color when I hover on the component that is rendered.

``
<div className="service-card--wrapper">
    <div className="service-card">
        <div className="service__icon" style={{backgroundColor:`${service.color}`}}>
            {service.icon}
        </div>
        <div className="service__title">{service.title}</div>
        <p className="service__para">{service.paragraph}</p>
        <button className="service__btn"><FaArrowRight/></button>
    </div>
</div>
``

I want to change the color when it hovers on the service-card but the CSS doesn't overwrite the HTML inline-style, is there a way I can do this?

Phil
  • 17
  • 3
  • The reason it does not has to do with specificity of the CSS ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity I would suggest you REMOVE it from the HMTL and use CSS with the class `service__icon:hover` https://developer.mozilla.org/en-US/docs/Web/CSS/:hover – Mark Schultheiss Jun 02 '23 at 20:50
  • Related for the parent hover => change child https://stackoverflow.com/q/14792574/125981 – Mark Schultheiss Jun 02 '23 at 20:56

3 Answers3

0

With the assumption that you want styles from a CSS declaration to override the ones in the style attribute, you need the CSS to have a higher specificity. Unfortunately the only way to do that in this case (that I'm aware of) is to add !important to the style in the CSS (or remove the style attribute and use CSS for that as well).

Using !important is usually reserved for certain definite overrides or as a last resort, so if you can avoid it that would be good. For example, if there aren't too many options for service.color you could have a class for each color, and then assign the corresponding classname based on the variable instead of the color directly.

Another option is to change the color programmatically in the JS in response to the corresponding mouse events.

Tom Pietrosanti
  • 4,184
  • 2
  • 24
  • 29
  • 2
    Related reference but yes; https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#inline_styles – Mark Schultheiss Jun 02 '23 at 20:59
  • {serviceInfo.map((service) => )} Cause I just made a component that passes everything and mapping it. So you think it's better to just make it one by one? – Phil Jun 02 '23 at 21:18
  • No, you could still do it that way, but maybe create a class within the ServicesCard from the service name that has the initial background color, that way all of your styling is together _and_ you won't need to do anything crazy with the specificity. – Tom Pietrosanti Jun 02 '23 at 22:00
0

Sounds like you want to do something like this:

.service__icon:hover {
background-color: #desiredColor!important;
}

Note however that both inline style and the use of !important is not considered a good practice

NarutoDrillin
  • 5
  • 2
0

One possible approach to achieve this is to use

  • onMouseOver
  • onMouseOut

handleMouseOver() {
  this.setState({ bgColor: service.color })
}

handleMouseOut() {
    this.setState({ bgColor: service.color2 })
}
<div className="service-card--wrapper">
    <div className="service-card">
        <div className="service__icon" 
             onMouseOver={this.handleMouseOver} 
             onMouseOut={this.handleMouseOut} 
             style={{backgroundColor:this.state.bgColor}}>
            {service.icon}
        </div>
        <div className="service__title">{service.title}</div>
        <p className="service__para">{service.paragraph}</p>
        <button className="service__btn"><FaArrowRight/></button>
    </div>
</div>
Jonathas Nascimento
  • 270
  • 5
  • 11