Java17：如何在FXML文件中为ToggleButton实现悬停背景变蓝效果

首先看你提供的原始FXML代码：

<ToggleButton fx:id="toggleButton" text="xxxxxxxx" style="-fx-background-color: transparent;">
    <tooltip>
        <Tooltip text="xxxxxxx"></Tooltip>
    </tooltip>
</ToggleButton>

要实现鼠标悬停时背景变为蓝色，你可以通过JavaFX CSS的:hover伪类来实现，这里提供两种可靠方案：

方案一：移除内联样式，用CSS类统一控制（推荐） #

这种方式避免了内联样式的优先级问题，更便于后续样式维护：

1. 修改FXML，移除内联的style属性，添加自定义样式类：

<ToggleButton fx:id="toggleButton" text="xxxxxxxx">
    <styleClass>
        <String fx:value="transparent-hover-button"/>
    </styleClass>
    <tooltip>
        <Tooltip text="xxxxxxx"/>
    </tooltip>
</ToggleButton>

2. 在你的JavaFX CSS文件中添加如下样式：

/* 默认状态：透明背景 */
.transparent-hover-button {
    -fx-background-color: transparent;
    /* 可选：去除圆角，保持和高亮时样式统一 */
    -fx-background-radius: 0;
}

/* 鼠标悬停状态：蓝色背景 */
.transparent-hover-button:hover {
    -fx-background-color: #1E90FF; /* 这里用的是经典蓝色，可替换为你需要的色值 */
}

方案二：保留内联样式，用!important强制覆盖 #

如果你不想修改原FXML的内联样式，可以通过ID选择器结合!important来强制覆盖内联样式的优先级：

1. 保持FXML不变，在CSS文件中添加：

#toggleButton:hover {
    -fx-background-color: #1E90FF !important;
}

注意事项 #

• 色值可以替换为任意你需要的蓝色，比如#0066CC、#4169E1等；
• 如果需要调整悬停时的边框、圆角等样式，可在:hover规则中添加-fx-border-color、-fx-background-radius等属性；
• 确保你的JavaFX应用已经正确加载了CSS文件（比如通过Scene的getStylesheets().add("你的CSS文件路径")）。

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