How to change text in a button on hover with CSS in JS in React

Question

I need to make a button that changes from the text 'Done' to the text 'Update' on hover, ONLY when a true/false flag is true. I had a working method using onMouseOver to detect mouseover and then flip the value using state. However i've been asked to do it via CSS.

I'm having a hard time getting it done with just CSS.

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

CSS in JS

onHoverHide: {
 display:'auto',
  '&:hover':{
    display: 'none'
},
},

onHoverShow: {
 display:'none',
  '&:hover':1
    display: 'auto'
},
},

this will make the first span vanish when the TEXT is hovered, but won't make the 2ndary text appear. As well I need it to apply on mouseover to the button, not just the text.

How can I target the span in the button correctly?

onHoverbutton: {
 '&:hover': {
  '& span': {
   display: 'none'

was not successful when applied to the button.

dbuchet · Accepted Answer · 2021-01-08 18:01:31Z

0

Use & $className to target nested className in CSS-in-JS

onHoverbutton: {
  '&:hover': {
    '& $onHoverHide': {
        ...
    }
  }
}

answered Jan 8, 2021 at 18:01

dbuchet

1,6511 gold badge7 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John · Accepted Answer · 2021-01-08 15:56:44Z

0

You're setting display: none; to span, but both of your texts are a span. Target the specific class of the one you want to hide. Here's CSS code which can do this:

.onHoverShow {
  display: none;
}

button:hover .onHoverShow {
  display: block;
}

button:hover .onHoverHide {
  display: none;
}

answered Jan 8, 2021 at 15:56

John

5,3621 gold badge8 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to change text in a button on hover with CSS in JS in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related