Question

我知道这可能是个很容易回答的问题，但是我尝试过在线搜索，但是由于我的一生，所以一直不知道要搜索什么。

我有一个动态按钮组件，该组件会根据其类名更改颜色，但是当存在多个类时，我不知道如何使悬停功能正常工作。

我的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;
}

我的按钮类：

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>
        )
    }
}

我只尝试了.G-green .button:hover，但这只是将主类颜色覆盖为悬浮颜色，否则我将得到一个没有悬浮功能的普通按钮。

如果有人知道答案，我将不胜感激。

如果您知道这种类型的样式又叫什么，那么下次我必须再次看起来像这样时，它将对我有帮助。

CSS按钮悬停不会改变颜色

0 个答案: