Is there away to change the background color to my button when I hover over it, and when I hover off-CodePudding

enter image description here

When I hover over my button I want to change the color, then when I hover away from the button it goes back to normal.

Here is my code

<Button
  outline
  color="secondary"
  style={{
    marginLeft: 5, borderRadius: '5px', padding: '2px', background: '#E3E3E3', color: '#000',
    fontSize: 7, marginTop: 0
  }}
  onClick={() => { handleCopy(player) }}
>
  <span className="enhanced-sports enhanced-sports-copy4" />
</Button>

Is there a way to fix this issue? Maybe add transition : 0.1s ease-in-out

CodePudding user response：

The outline is coming from the browser defaults that ensure accessibility. Someone who is using a keyboard to navigate uses the outline to be able to see what is focused.

However, by default in browsers, it also shows if you click and not just if you use keyboard navigation.

Many answers will tell you to disable focus outlines altogether but that is bad for accessibility and so a bad idea. You can disable them for mouse users only by adding this to your stylesheet:

:focus:not(:focus-visible) { outline: none }

This way users tabbing through your elements will still see it, which is necessary for accessibility reasons.

CodePudding user response：

modify your style object in <Button>

style={{
    marginLeft: 5, 
    borderRadius: '5px', 
    ......, // others style
    outline: 'none'
}}