Изменение цвета фокуса элемента списка при нажатии в функциональных компонентах

#javascript #css #reactjs

#javascript #css #reactjs

Вопрос:

 <li key={i} onClick={() => setBlogName(category.label) amp; handleListColor}>
  {category.name}
 <span style={{ float: 'right' }}>{category.total}</span>
</li>
 

У меня есть этот стиль CSS, готовый для этого, но я хочу изменить цвет фокуса при нажатии.

 .categories_Div li:first-child {
    line-height: 2.5;
    cursor: pointer;
    color: #F38022;
    font-size: 15px;
    font-weight: 500;
}

.categories_Div li {
    line-height: 2.5;
    cursor: pointer;
    color: #707070;
    font-size: 15px;
    font-weight: 500;
}
 

Но я хочу добавить фокус к каждому списку при нажатии.

Ответ №1:

Вы можете сделать это ниже.

 focus {
  background-color: yellow;
}
 

Взгляните https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_focus

рабочий код http://jsfiddle.net/YFF6P/4 /

Комментарии:

1. Не могли бы вы опубликовать свой обновленный код?. Я обновил рабочий демонстрационный URL-адрес до моего ans.