JavaFX：如何为多个Button实现内联悬停效果（避免重复事件）

你的问题核心是当前事件方法硬编码了具体按钮，导致触发时同时修改多个按钮样式。下面是几种不用写N个事件方法的高效方案：

方案1：用CSS伪类（最推荐，零Java代码） #

这是JavaFX处理控件状态的标准方式，完全不需要编写鼠标事件代码：

• 若使用FXML文件，先在根节点引入CSS样式文件，给所有目标按钮添加统一样式类：

<AnchorPane stylesheets="@button-styles.css">
    <Button fx:id="view1" styleClass="custom-hover-btn"/>
    <Button fx:id="view2" styleClass="custom-hover-btn"/>
    <!-- 更多按钮直接复用custom-hover-btn类 -->
</AnchorPane>

然后在button-styles.css文件中定义悬停样式：

.custom-hover-btn:hover {
    -fx-background-color: white;
}

• 若临时测试，也可以直接在FXML按钮上内联伪类样式（不推荐长期维护）：

<Button fx:id="view1" style="默认样式; -fx-background-color: 初始颜色;" />

CSS会自动识别:hover状态并应用样式。

方案2：复用同一事件方法，通过事件源区分 #

如果必须用Java代码处理，无需编写多个方法，只需在当前事件方法中获取触发事件的按钮，仅修改该按钮样式：

@FXML
void onMouseEntered(MouseEvent event) {
    // 获取触发事件的按钮对象
    Button targetBtn = (Button) event.getSource();
    targetBtn.setStyle("-fx-background-color: white;");
}

// 配套鼠标移出时恢复默认样式的方法
@FXML
void onMouseExited(MouseEvent event) {
    Button targetBtn = (Button) event.getSource();
    targetBtn.setStyle("-fx-background-color: 你的默认背景色;");
}

之后在FXML中给所有按钮绑定这两个事件即可：

<Button fx:id="view1" onMouseEntered="#onMouseEntered" onMouseExited="#onMouseExited"/>
<Button fx:id="view2" onMouseEntered="#onMouseEntered" onMouseExited="#onMouseExited"/>

无论有多少按钮，都只需要这两个方法。

方案3：Java代码动态绑定伪类（进阶场景） #

如果需要动态控制悬停效果的启用/禁用，可以用JavaFX的PseudoClass实现：

private final PseudoClass HOVER_STATE = PseudoClass.getPseudoClass("hover");

@Override
public void initialize(URL url, ResourceBundle rb) {
    // 批量给按钮绑定鼠标事件
    List<Button> buttonList = Arrays.asList(view1, view2);
    buttonList.forEach(btn -> {
        btn.setOnMouseEntered(e -> btn.pseudoClassStateChanged(HOVER_STATE, true));
        btn.setOnMouseExited(e -> btn.pseudoClassStateChanged(HOVER_STATE, false));
    });
}

这种方式适合需要根据业务逻辑动态切换悬停状态的场景，样式依然可以通过CSS定义。

总结：优先选择CSS伪类方案，最符合JavaFX的设计思想，代码量最少且最易维护。

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