更改背景颜色和字体颜色的 CSS 和 React/Transition 不起作用

Question

我正在尝试对悬停产生影响，以更改 React 应用程序中的背景颜色和字体颜色。

这是我的 react 组件:

import * as React from 'react'
import styles from './Project.module.scss'

let Project = function(props){
    return (
        <div className={styles.Project}>
            <h1>{props.Title}</h1>
            <h4>{props.Budget? props.Budget: 'No budget specificed'}</h4>
        </div>
    )
}

export default Project

这是我的 Project.module.scss 代码:

.Project{
    width: 45%; 
    box-shadow: 1px 1px grey;
    border: 2px solid grey; 
    padding-left: 10px;
    box-sizing: border-box;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    color: blue;
    background-color: white;
    transition: all 2 ease;
    transition-property: background-color, color;
    -webkit-transition: all 2 ease;
    -webkit-transition-property:  background-color, color;

    &:hover{
        background-color: black;
        color: white;
    }
}

除了背景颜色和颜色的过渡外，所有属性似乎都有效。

感谢任何帮助。

Answer 1

-webkit-transition: all 2s ease;

您需要添加带有过渡时间的s。它代表秒