css - 悬停伪类不适用于 React 中的 FontAwesome 图标

问题描述

我很困惑。昨天我在另一个组件中做了同样的事情，它工作得很好。让我给你看代码...

<FontAwesomeIcon onClick={this.displayVerticalNavbar} className="faColorOverwriter" id="toggleInContNavBar" icon={faBars} pull="right"/>

    #toggleInContNavBar:hover{
    height:84%;
    opacity:0.8;
    cursor:pointer;
}

今天，我一直在尝试在另一个组件中做类似的事情，并且 :hover 无论如何都行不通。为什么你认为它是？

我现在的代码：

<FontAwesomeIcon id="menuSearchElementEdit" icon={faEdit}/>

    #menuSearchElementEdit:hover{
    opacity:0.8;
    cursor:pointer;
}

标签： cssreactjsfont-awesome

这段代码对我有用。您可以按如下方式添加光标样式，而不是添加不同的 CSS。

<FontAwesomeIcon id="menuSearchElementEdit" icon={faEdit} style={{ cursor: "pointer" }}/>

css - 悬停伪类不适用于 React 中的 FontAwesome 图标

问题描述

解决方案

推荐阅读