时间戳

首页 > 解决方案 > 如何以及在何处为鼠标悬停的 Fontawosomefx 图标设置 css 样式

java - 如何以及在何处为鼠标悬停的 Fontawosomefx 图标设置 css 样式

问题描述

有人可以告诉如何为顶部带有 fontawsome 图标的按钮设置 CSS 以在鼠标悬停在 javafx 中时更改图标填充颜色（使用 fxml）？

tried this css file and attaching to the button ..but no luck..

.icons:hover {
    -fx-fill: white;
    -icons-color: black;
}

从 fxml 像这样添加图标 

 <JFXButton fx:id="viewStaffButton" alignment="CENTER" buttonType="RAISED" graphicTextGap="10.0" onMouseClicked="#onVIewStaffClicked" prefHeight="45.0" prefWidth="179.0" ripplerFill="WHITE" style="-fx-border-color: blue; -fx-border-color: white;" text="View Staff" textFill="WHITE">
                                    <VBox.margin>
                                        <Insets bottom="50.0" />
                                    </VBox.margin>
                                    <graphic>
                                        <FontAwesomeIconView fill="WHITE" glyphName="USERS" size="20" />
                                    </graphic>
                                    <cursor>
                                        <Cursor fx:constant="HAND" />
                                    </cursor>
                                </JFXButton>

标签： javajavafxfont-awesomefxml

解决方案

这些图标的 CSS 类是glyph-icon.

尝试用.icons:hover { ... }css.glyph-icon:hover { ... }替换。

此外，您需要 -icons-color在 CSS 中的某处声明，例如 root

.root{
    -icons-color: red;
}

以后使用它。

推荐阅读