：悬停不适用于 FontAwesomeIconView

Question

我遇到了一个问题：:hover CSS 选项无法正常工作。 这是CSS：

.body:hover {
    -fx-background-color: #b8fffd;
}

.exitIcon:hover {
    -fx-fill: gray;
}

主体悬停工作正常，但 .exitIcon 不行。 如果我拼错了 className，我也尝试使用 FontAwesomeIconView 选择器，但它仍然不起作用。

这是 FXML 代码：

<AnchorPane prefHeight="800.0" prefWidth="1000.0" styleClass="body" stylesheets="@styles/lightSignalsStyles.css" xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.main.captainscompass.controllers.LightSignalsController">
   <HBox alignment="CENTER_LEFT" prefHeight="200.0" stylesheets="@styles/lightSignalsStyles.css" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
      <FontAwesomeIconView glyphName="ARROW_LEFT" size="50" styleClass="exitIcon">
         <cursor>
            <Cursor fx:constant="HAND" />
         </cursor>
      </FontAwesomeIconView>
   </HBox>
   <HBox alignment="CENTER" prefHeight="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
      <Label text="Light Signals Quiz" textAlignment="CENTER">
         <font>
            <Font size="30.0" />
         </font>
      </Label>
   </HBox>
   <HBox alig`nment="CENTER_RIGHT" layoutX="10.0" layoutY="10.0" prefHeight="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
      <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
         <Image url="@assets/sailboaticon.png" />
      </ImageView>
   </HBox>
</AnchorPane>

所以我绝对没有拼错类名或文件名，因为 .body 实际上正在工作。 如果我删除“：hover”，样式将按预期应用。 我真的不知道这里发生了什么，因为 :hover 的每一个其他用法都有效。

注意：这不是我的主要场景。我用这个逻辑改变了它：

FXMLLoader loader = new FXMLLoader(App.class.getResource(LIGHT_SIGNALS_FXML));
        stage = (Stage)((Node)event.getSource()).getScene().getWindow();
        Scene scene = new Scene(loader.load(), 1000, 800);

在这个场景中，任何事件都不起作用，甚至像 onKeyPressed 这样的事件也不起作用。但我还是不知道是什么原因造成的。

Answer 1

我无法重现这个（JavaFX 20.0.2）。

fx-fill

不是继承的风格。您不能将其设置在父级上并期望它应用于父级的后代。 （此声明仅供参考，您在问题中没有这样做）。

查看 font Awesome 代码（因为我不知道它的文档在哪里），

FontAwesomeIconView

是

Text

的子项，因此

-fx-fill

可以应用于它。 font Awesome 代码还在

glyph-icon

的图标上设置了样式类。此外，

:hover

是一个通用的伪类，可以应用于任何节点。

如果您想设置容器中所有很棒的字体图标悬停时的颜色，您可以使用以下命令：

.container .glyph-icon:hover {
    -fx-fill: red;
}

要为各个字形设置不同的悬停颜色，您可以将其设置在各个字形上，如有必要，使用

!important

覆盖以前的填充样式。

.gear-icon:hover {
    -fx-fill: green !important;
}

使用此答案中代码的修改版本将鼠标悬停在某些图标上的示例输出。

字体.css

.container .glyph-icon:hover {
    -fx-fill: red;
}

.gear-icon:hover {
    -fx-fill: green !important;
}

字体.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.HBox?>

<HBox styleClass="container" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" spacing="10.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <FontAwesomeIconView glyphName="MUSIC" size="1.5em" />
        <FontAwesomeIconView glyphName="GEAR" size="1.5em" styleClass="gear-icon" />
        <FontAwesomeIconView glyphName="FILE" size="1.5em" />
        <FontAwesomeIconView glyphName="DASHBOARD" size="1.5em" />
        <FontAwesomeIconView glyphName="HEART" size="1.5em" />
    </children>
    <padding>
        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
    </padding>
</HBox>

FontApplication.java

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;
import java.util.Objects;

public class FontApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(FontApplication.class.getResource("fonts.fxml"));
        Scene scene = new Scene(fxmlLoader.load());
        scene.getStylesheets().add(Objects.requireNonNull(FontApplication.class.getResource("fonts.css")).toExternalForm());
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}