Question

我试图对悬停产生影响，以在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。它代表seconds

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

1 个答案: