web-dev-qa-db-ja.com

JavaFx:ボタンの境界線とホバー

Java 8.を使用しています。ツールバーとボタンがあります。

以下を実装したい:

  • ツールバーの通常の状態(マウスホバーなし)では、ボタンラベルのみを表示する必要があります(背景も境界線も表示されません)。
  • ユーザーのマウスがボタンの上に移動すると、通常のボタンが表示されます。

Css経由でそれを行う方法は?

16
user2022068

スタイルを使用して背景を削除します。

.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;
}
22
ItachiUchiha

背景の透明度は、マウスリスナーを介して、つまり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
Rahel Lüthy

Netzwergに同意します。 javaxmlでfxmlを使用している場合は、これらのコード行をコントローラークラスの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