I have this code:
public static void main(String[] ar){
launch(ar);
}
@Override
public void start(Stage primaryStage){
TitledPane titledPane = new TitledPane("", null);
titledPane.setCollapsible(false);
titledPane.setContent(new javafx.scene.control.TextArea("George"));
Platform.runLater(() -> {
titledPane.lookup(".title").setStyle("-fx-background-color: rgba(255, 255, 255, 1);" +
"-fx-border-style: solid;" +
"-fx-border-color: rgba(0, 0, 0, 1);" +
"-fx-border-width: 1px;");
titledPane.lookup(".content").setStyle("-fx-background-color: rgba(255, 255, 255, 1);" +
"-fx-border-style: solid;" +
"-fx-border-color: rgba(0, 0, 0, 1);" +
"-fx-border-width: 1px;");
});
HBox hBox = new HBox();
hBox.setAlignment(Pos.CENTER);
Text textTitle = new Text("CONSOLE");
Button buttonClear = new Button("CLEAR");
HBox.setMargin(textTitle, new Insets(0, 10, 0, 0));
hBox.getChildren().addAll(textTitle, buttonClear);
titledPane.setGraphic(hBox);
primaryStage.setScene(new Scene(titledPane));
primaryStage.show();
}
If I place mouse in zone with red line, it trigger mouseover effect of button clear.
How to stop to trigger mouseover effect of button if I'm not with mouse on it?
When the title
is hovered over, modena.css
changes a looked-up color's value to give it the hover style; specifically, it changes -fx-color
. This appears to have the side-effect of making the Button
change to its hover style as well. I expect this could be considered a bug.
To work around this problem, apply the following CSS (selectors assume the Button
is the graphic):
.titled-pane > .title:hover > .button {
-fx-color: -fx-base;
}
.titled-pane > .title:hover > .button:hover {
-fx-color: -fx-hover-base;
}
.titled-pane > .title:hover > .button:armed {
-fx-color: -fx-pressed-base;
}
The above will make the Button
keep its default styling. You can obviously style the Button
your own way using the same selectors.
Since you need to target pseudo classes it will be easier to have the CSS in an external file, rather than setting the styles inline with setStyle
. To keep the look you have, you can use the following stylesheet (includes the above):
.titled-pane {
-fx-collapsible: false;
-fx-content-display: right;
-fx-graphic-text-gap: 10px;
}
.titled-pane > .title,
.titled-pane > .content {
-fx-background-color: white;
-fx-border-style: solid;
-fx-border-color: black;
-fx-border-width: 1px;
}
.titled-pane > .title:hover > .button {
-fx-color: -fx-base;
}
.titled-pane > .title:hover > .button:hover {
-fx-color: -fx-hover-base;
}
.titled-pane > .title:hover > .button:armed {
-fx-color: -fx-pressed-base;
}
And here's an example using this CSS:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.control.TitledPane;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
var pane = new TitledPane("CONSOLE", new TextArea("This is the console output."));
pane.setGraphic(new Button("CLEAR"));
var scene = new Scene(pane, 600, 400);
scene.getStylesheets().add("Main.css"); // replace with your resource
primaryStage.setScene(scene);
primaryStage.show();
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.