Блог

Мне нужно сделать кнопку, которая меняется с текста «Готово» на текст «Обновить» при наведении курсора мыши, ТОЛЬКО если установлен флаг true / false. У меня был рабочий метод, использующий onMouseOver для обнаружения наведения курсора мыши, а затем изменения значения с помощью state . Однако меня попросили сделать это с помощью CSS.

Мне трудно сделать это с помощью только CSS.

 <Button>
<span className={onHoverHide}>Done</span>
<span className={onHoverShow}>Update</span>
</Button>

CSS in JS

onHoverHide: {
 display:'auto',
  'amp;:hover':{
    display: 'none'
},
},

onHoverShow: {
 display:'none',
  'amp;:hover':1
    display: 'auto'
},
},
 

это приведет к исчезновению первого интервала при наведении курсора мыши на ТЕКСТ, но не приведет к появлению текста 2ndary. Также мне нужно, чтобы он применялся при наведении курсора мыши на кнопку, а не только к тексту.

Как я могу правильно настроить таргетинг на диапазон в кнопке?

 onHoverbutton: {
 'amp;:hover': {
  'amp; span': {
   display: 'none'
 

не удалось добиться успеха при применении к кнопке.

Используется amp; $className для определения вложенного имени класса в CSS-in-JS

 onHoverbutton: {
  'amp;:hover': {
    'amp; $onHoverHide': {
        ...
    }
  }
}
 

Вы устанавливаете display: none; значение span, но оба ваших текста представляют собой span. Укажите конкретный класс того, который вы хотите скрыть. Вот CSS-код, который может это сделать:

 .onHoverShow {
  display: none;
}

button:hover .onHoverShow {
  display: block;
}

button:hover .onHoverHide {
  display: none;
}