React：将鼠标悬停在组件上

Question

我正在使用 CSS 模块来设计我的计算器应用程序。 我希望当用户将鼠标悬停在组件上时，组件的背景颜色会发生变化。 但是，我无法实施它。 谁能帮我？

附加必要的 CSS 文件：

.bstyle{
    height:14%;
    width:25%;
}

.red{
    background-color: #DC143C    ;
    font-size: 30px;
    color: white;
}

.black{
    background-color:  #483c32 ;
    color: white;
    font-size: 30px;
}

Answer 1

你可以在你的 css 中使用这样的东西，但你可以适应你的需要。

.bstyle{
    height:14%;
    width:25%; 
}
.red{
    background-color: #DC143C    ;
    font-size: 30px;
    color: white;
}
.black{
    background-color:  #483c32 ;
    color: white;
    font-size: 30px;

    &:hover span {
        opacity: 0.7;
        visibility: visible;
    }
}

Answer 2

<div classsName="foo">
   
</div> 

样式文件

.foo {
  background-color: red
  transition: background-color .2s linear;
}

.foo:hover {
  background-color: black;
}