时间戳

首页 > 解决方案 > CSS & React / Transition 改变背景颜色和字体颜色不起作用

css - CSS & React / Transition 改变背景颜色和字体颜色不起作用

问题描述

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

这是我拥有的反应组件：

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

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

任何帮助表示赞赏。

标签： cssreactjssasscss-transitions

解决方案

-webkit-transition: all 2s ease;

您需要添加s过渡时间。它代表seconds

推荐阅读