Реакция: наведение курсора мыши на компоненты

#html #css #reactjs #components

#HTML #css #reactjs #Компоненты

Вопрос:

Я использую модули CSS для оформления моего приложения calculator. Я хочу, чтобы цвет фона компонента менялся, когда пользователь наводит на него курсор. Однако я не могу это реализовать. Кто-нибудь может мне помочь?

Прикрепление необходимого файла CSS:

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

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

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

Ответ №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;

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