0

I know this is probably an easy question to answer, but I've tried searching for this online but for the life of me couldn't figure out what to search for.

I have a dynamic button component that changes color based on its class name, but I can't figure out how to get the hover function to work when multiple classes are present.

My CSS:

.Button {
    border-radius: 4px;
    border: none;
    padding: 10px 24px;
}

.G-green {
    color: white;
    background-color: #0F9D58;
}

.Button .G-green .button:hover{
    cursor: pointer;
    background-color: #0d8c4f;
}

.G-blue {
    color: white;
    background-color: #4285F4;
}

.G-red {
    color: white;
    background-color: #DB4437;
}

.G-yellow {
    color: white;
    background-color: #F4B400;
}

My button class:

import React from 'react'
import '../../StyleSheets/Button.css'

export default class Button extends React.Component{
    constructor(props){
        super(props);
        this.state = {
        }
    }
    render() {
        return(
            <div id="button">
                <button className="Button G-green" 
                        onClick={this.props.click}>{this.props.name}</button>
            </div>
        )
    }
}

I tried just .G-green .button:hover but this just overrides the main classes color to the hover color, otherwise I'm just getting a normal button with no hover functionality.

If anyone knows the answer to this, I would greatly appreciate it.

Also if you know what this type of styling is called, it would help me the next time I have to look something like this up again.

ℛɑƒæĿᴿᴹᴿ
  • 4,983
  • 4
  • 38
  • 58
Michael
  • 1,454
  • 3
  • 19
  • 45
  • 3
    Have you try _.Button.G-green:hover{}_? – Sfili_81 Jan 21 '20 at 15:15
  • 2
    White space between classes means something! `.class1 .class2` is different from `.class1.class2` – evolutionxbox Jan 21 '20 at 15:16
  • 1
    Since you're using the `.Button .G-green .button:hover` selector, your hover behavior will only affect elements having **both** the Button class and the G-green class. On top of that I think you duplicated your selector with a mistake (Button and button), cause looking at your code makes me wonder how the "button" class will ever be applied to it. The id selector is #, opposed to . for a class. – Raekh Void Jan 21 '20 at 15:17
  • @evolutionxbox what does it mean? – Michael Jan 21 '20 at 15:22
  • 1
    See https://stackoverflow.com/questions/1126338/what-does-a-space-mean-in-a-css-selector-i-e-what-is-the-difference-between-c – evolutionxbox Jan 21 '20 at 15:23
  • @Sfili_81 that worked for me, thank you. – Michael Jan 21 '20 at 15:31
  • For refactoring purposes : https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/ – Raekh Void Jan 21 '20 at 15:38
  • Try using state and function that toggle that state after that create a ternary condition whenever that state is true background change must fire and also call that function to onMouseEnter and onMouseLeave – Euph Jan 22 '20 at 08:05

0 Answers0