JavaFX Hover Effekt über das Parent Element

[lam_tr]

Hallo zusammen,

ich habe ein AnchorPane und als Kinder drunter habe ich einen TextArea, HBox und ein Label. Die drei Elemente verdecken so gut wie fast das AnchorPane. Wie kann ich das so implementieren, dass sobald das AnchorPane mit dem Mauszeiger erreicht wird, dass zum Beispiel der Hintergrund sich ändert. Weil schlussendlich hover ich nicht über das AnchorPane, sondern über die Kinder. Aber tatsächlich will ich, sobald die Fläche erreicht wird soll Hintergrund gefärbt werden.

Wie würde man in dem Fall vorgehen?

Viele Grüße
lam

 

[knilch]

Hi,
Du kannst das erreichen, indem du z.B. dem anchorPane einen envent-handler für MouseEnter und MouseExit erstellst.
Hier mal ein Bespiel:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        AnchorPane anchorPane = new AnchorPane();
        TextArea textArea = new TextArea();
        textArea.setPrefWidth(200);
        textArea.setPrefHeight(50);
        textArea.setLayoutX(10);
        textArea.setLayoutY(10);

        HBox hBox = new HBox();
        hBox.setLayoutX(10);
        hBox.setLayoutY(120);

        Label label = new Label("Ich bin ein label");
        hBox.getChildren().add(label);

        anchorPane.getChildren().add(textArea);
        anchorPane.getChildren().add(hBox);

        textArea.setOnMouseEntered((event) -> {
            anchorPane.setStyle("-fx-background: #FFFFFF;");
            textArea.requestFocus(); // damit ein Text eingegeben werden kann
        });
        textArea.setOnMouseExited((event) -> {
            anchorPane.setStyle("-fx-background: #FFFF00;");
            anchorPane.requestFocus(); // damit eine Texteingabe nicht in der TextArea gemacht wird.
        });

        label.setOnMouseEntered((event) -> {
            anchorPane.setStyle("-fx-background: #FFFFFF;");
        });
        label.setOnMouseExited((event) -> {
            anchorPane.setStyle("-fx-background: #FFFF00;");
        });

        anchorPane.setOnMouseEntered((event) -> {
            anchorPane.setStyle("-fx-background: #FFFF00;");
        });
        anchorPane.setOnMouseExited((event) -> {
            anchorPane.setStyle("-fx-background: #FFFFFF;");
        });
        anchorPane.setOnMousePressed((event) -> {
            anchorPane.setStyle("-fx-background: #00FFFF;");
        });

        Scene scene = new Scene(anchorPane,400,400);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        launch(args);
    }
}

 

[dzim]

@knilch - gute programatische Lösung.
Alternativ kannst du es auch über CSS erreichen. Ich habe bei mir einen ähnlichen Ansatz benötigt (hover-Effekt auf einem Layout) und habe eine custom-Style-Class erstellt

/* default color + hover color */
.navigation {
    -fx-background-color: -neutral-light-gray-1;
}
.navigation:hover {
    -fx-background-color: -neutral-dark-gray-2;
}

/* pseudo classes used in code */
.navigation:selected {
    -fx-background-color: -brand-secondary;
}
.navigation:selected-light {
    -fx-background-color: -brand-tertiary;
}

/* and if I want no hover-effect but need the background color */
.navigation-no-hover {
    -fx-background-color: -neutral-light-gray-1;
}

Die Farben -neutral-light-gray-1, -neutral-light-gray-1, -brand-secondary und -brand-tertiary werden bei mir im
.root { /*... */ }-Bereich des CSS festgelegt.

 

[lam_tr]

Hallo dzim,

wie kann ich von vorne rein Konstanten, hier: Farben, in Css definiere?
Kann ich auch eine CSS erben?

Grüße
Dim

 

[dzim]

Nein, CSS erben geht, soweit ich weiss, leider nicht.
Ansonsten aber:

.root {
    -my-fancy-color-name: #FFFF0000; /* web-color with full opacity */
    -my-fancy-color-name-2: red; /* pre-defined named color */
    -my-fancy-color-name: #FF0000; /* default web-color */
}

#edit:
Praktischerweise kann man darin auch die Basis-Farbe der gesamten Anwendung festlegen (was ich gerne mache, und dann davon ausgehen anpasse, was ich benötige):

.root {
    /* color definitions or whatever */
    -my-base-color: silver;
    -fx-base: -my-base-color;
}