JavaFX中FontAwesomeIconView的:hover CSS样式失效问题求助

核心问题原因 #

你当前的FXML布局里，三个<HBox>都设置了AnchorPane.topAnchor="0.0"，导致它们在垂直方向完全重叠。FXML中节点的渲染顺序按代码书写顺序排列，最后一个带ImageView的HBox位于最上层，完全遮挡了左侧的FontAwesomeIconView和中间的Label：

• 鼠标hover时，实际触发的是最上层HBox的事件，而非下层的FontAwesomeIconView，所以.exitIcon:hover样式无法生效；
• 上层HBox遮挡了所有下层元素，同时新场景的根节点未获取焦点，导致键盘事件等无法正常响应。

解决方案 #

方案1：调整布局结构，避免节点重叠 #

将三个HBox放入一个父HBox中，让它们横向排列，从根本上消除重叠问题。

方案2：保留重叠布局，允许鼠标事件穿透 #

如果必须保持现有重叠布局，给最上层的HBox添加mouseTransparent="true"属性，让鼠标事件穿透到下层元素；或者设置pickOnBounds="false"，仅当鼠标点击到HBox内的可见元素（如ImageView）时才响应，否则穿透。

方案3：确保场景根节点获取焦点 #

在控制器的初始化方法中，让场景根节点请求焦点，保证键盘事件能被正常捕获。

修改代码示例 #

示例1：调整布局后的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横向排列三个子HBox，消除重叠 -->
   <HBox prefHeight="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
      <HBox alignment="CENTER_LEFT" prefWidth="333.0">
         <FontAwesomeIconView glyphName="ARROW_LEFT" size="50" styleClass="exitIcon">
            <cursor>
               <Cursor fx:constant="HAND" />
            </cursor>
         </FontAwesomeIconView>
      </HBox>
      <HBox alignment="CENTER" prefWidth="334.0">
         <Label text="Light Signals Quiz" textAlignment="CENTER">
            <font>
               <Font size="30.0" />
            </font>
         </Label>
      </HBox>
      <HBox alignment="CENTER_RIGHT" prefWidth="333.0">
         <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
            <Image url="@assets/sailboaticon.png" />
         </ImageView>
      </HBox>
   </HBox>
</AnchorPane>

示例2：保留重叠布局的修改 #

给最上层HBox添加mouseTransparent="true"：

<HBox alignment="CENTER_RIGHT" layoutX="10.0" layoutY="10.0" prefHeight="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" mouseTransparent="true">
   <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
      <Image url="@assets/sailboaticon.png" />
   </ImageView>
</HBox>

示例3：控制器中请求焦点 #

public class LightSignalsController implements Initializable {
    @FXML
    private AnchorPane root;

    @Override
    public void initialize(URL url, ResourceBundle resourceBundle) {
        // 让根节点获取焦点，确保键盘事件正常响应
        root.requestFocus();
    }

    // 你的业务逻辑代码
}

内容的提问来源于stack exchange，提问作者Tymo Tymo