如何在悬停时将阴影应用到 table 行的底部

Question

这只给我顶部的阴影。

增加 y 偏移没有任何作用。看起来它可能是“背后的东西”

.table-row-cell:hover {
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10, 0.5, 0.0, 0.0)
}

//increased y axis offset
.table-row-cell:hover {
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10, 0.5, 0.0, 5.0)
}

Answer 1

后续行按添加顺序放入堆栈。这就是您描述为“某事背后”的问题的原因。要获得所需的效果，请将悬停的行置于最前面以放在堆栈的顶部。

import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.value.ChangeListener;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.stage.Stage;

public class TableRowDropShadowApp extends Application {

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

    @Override
    public void start(Stage primaryStage) throws Exception {

        TableView<Employee> tableView = new TableView<>(
                FXCollections.observableArrayList(new Employee("John", "Doe"), new Employee("Jane", "Smith")));

        TableColumn<Employee, String> nameColumn = new TableColumn<>("Name");
        nameColumn.setCellValueFactory(param -> param.getValue().nameProperty);

        TableColumn<Employee, String> surnameColumn = new TableColumn<>("Surname");
        surnameColumn.setCellValueFactory(param -> param.getValue().surnameProperty);

        tableView.getColumns().setAll(nameColumn, surnameColumn);

        tableView.setRowFactory(table -> {
            TableRow<Employee> tableRow = new TableRow<>();
            tableRow.hoverProperty().addListener((ChangeListener<Boolean>) (observable, oldValue, newValue) -> {
                if (newValue) {
                    tableRow.toFront();
                    tableRow.setStyle("-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10, 0.5, 0.0, 0.0)");
                } else {
                    tableRow.setStyle("");
                }
            });
            return tableRow;
        });

        primaryStage.setScene(new Scene(tableView));
        primaryStage.show();
    }
}

class Employee {

    public final StringProperty nameProperty = new SimpleStringProperty();
    public final StringProperty surnameProperty = new SimpleStringProperty();

    public Employee(String name, String surname) {
        nameProperty.set(name);
        surnameProperty.set(surname);
    }
}

如何在悬停时将阴影应用到 table 行的底部

How can I apply a drop shadow to the bottom of a table row on hover

javafx

javafx-css