如何显示图标可以用光标悬停

Posted 2023-02-21

【中文标题】如何显示图标可以用光标悬停

【英文标题】：How to show icon is hoverable with cursor

【发布时间】：2021-10-02 18:01:27

【问题描述】：

我有一个字体很棒的图标，带有一个 onclick 作为按钮。一切正常，但是当我将鼠标悬停在图标上时，我的鼠标不会从指针变为手指。

我怎样才能实现这种行为？

这是简单的图标实现：

<FontAwesomeIcon
    className='text-white'
    icon=faChevron
    onClick=this.next
    size='lg'
/>

【问题讨论】：

使用光标：指针；属性

【参考方案1】：

一般来说，你可以像这样使用 CSS 来改变鼠标光标：

.text-white 
  cursor: pointer;

还有很多其他变种，见这篇 MDN 文章：https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

【参考方案2】：

试试

.text-white:hover 
cursor:pointer