JavaFx:按钮边框和悬停

Posted

技术标签:

【中文标题】JavaFx:按钮边框和悬停【英文标题】:JavaFx: Button border and hover 【发布时间】:2015-08-21 05:35:15 【问题描述】:

我正在使用 Java 8。我有工具栏和按钮。

我想实现以下内容:

在工具栏的通常状态下(没有鼠标悬停),只能看到按钮标签(没有背景,也没有边框)。 当用户鼠标悬停在按钮上时,必须看到通常的按钮。

如何通过 css 实现?

【问题讨论】:

【参考方案1】:

我同意 netzwerg。如果您将 fxml 与 javafx 一起使用,那么您应该在控制器类的 initialize() 方法中包含这些代码行。

控制器类示例:

public class Controller implements Initializable
    private Button test;
    private static final String IDLE_BUTTON_STYLE = "-fx-background-color: transparent;";
    private static final String HOVERED_BUTTON_STYLE = "-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;";

    @Override
    public void initialize(URL location, ResourceBundle resources) 
        button.setStyle(IDLE_BUTTON_STYLE);
        button.setOnMouseEntered(e -> button.setStyle(HOVERED_BUTTON_STYLE));
        button.setOnMouseExited(e -> button.setStyle(IDLE_BUTTON_STYLE));
    

【讨论】:

【参考方案2】:

可以通过鼠标侦听器控制背景透明度,即通过以编程方式设置 CSS(这减少了对外部样式表的需求):

final String IDLE_BUTTON_STYLE = "-fx-background-color: transparent;";
final String HOVERED_BUTTON_STYLE = "-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;";


button.setStyle(IDLE_BUTTON_STYLE);
button.setOnMouseEntered(e -> button.setStyle(HOVERED_BUTTON_STYLE));
button.setOnMouseExited(e -> button.setStyle(IDLE_BUTTON_STYLE));

【讨论】:

【参考方案3】:

使用样式去除背景:

.button 
    -fx-background-color: transparent;

悬停时,只需使用modena.css 中的按钮样式即可恢复所有内容:

.button:hover
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
    -fx-text-fill: -fx-text-base-color;
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;

【讨论】:

仅供参考,数字可能是关闭的,例如在 fx-background-insets 中我使用了 0、1、2 和 fx-backgroundradius:我使用了 5、4、3 就像一个魅力。我知道这是一个非常古老的问题。

以上是关于JavaFx:按钮边框和悬停的主要内容,如果未能解决你的问题,请参考以下文章

前端例程20220729:按钮悬停边框卷动效果

CSS底部边框悬停“抖动”

Javafx menuitem 白色边框

JavaFX 节点部分边框

CSS悬停样式仅在对象的边框上?

JavaFX 隐藏 ScrollPane 灰色边框