React：将鼠标悬停在组件上答案

【问题标题】：React: Hover over componentsReact：将鼠标悬停在组件上
【发布时间】：2021-02-04 21:04:59
【问题描述】：

我正在使用 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;
}

【问题讨论】：

标签： html css reactjs components

【解决方案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;
    }
}

【讨论】：

【解决方案2】：

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

styles.css

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

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

【讨论】：