css 当鼠标悬停在按钮上时，是否可以更改按钮的背景颜色，当鼠标悬停在按钮上时，按钮是否可以恢复正常

bkhjykvo 于 2023-01-18 发布在其他

关注(0)|答案(2)|浏览(214)

当我悬停在我的按钮我想改变颜色，然后当我悬停远离按钮它回到正常。
下面是我的代码

<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>

有没有办法解决这个问题？也许添加transition : 0.1s ease-in-out

css

来源：https://stackoverflow.com/questions/75103928/is-there-away-to-change-the-background-color-to-my-button-when-i-hover-over-it

2条答案

按热度按时间

bq3bfh9z1#

轮廓来自浏览器的默认设置，以确保可访问性。有人谁是使用键盘导航使用outline能够看到什么是重点。
但是，默认情况下，在浏览器中，它也会显示您是否单击，而不仅仅是是否使用键盘导航。
很多答案会告诉你完全禁用焦点轮廓，但这对可访问性不利，因此不是个好主意。你可以只通过在样式表中添加以下内容来禁用鼠标用户的焦点轮廓：

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

这样，用户在元素中切换时仍然可以看到它，这对于可访问性来说是必要的。

赞(0）回复(0）举报 2023-01-18

syqv5f0l2#

在中修改样式对象

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

赞(0）回复(0）举报 2023-01-18

我来回答

css 当鼠标悬停在按钮上时，是否可以更改按钮的背景颜色，当鼠标悬停在按钮上时，按钮是否可以恢复正常

2条答案

相关问题

热门标签

最新问答