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

标签： htmlcssreactjscomponents

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