java - 按钮悬停和按下效果 CSS Javafx

Question

我是 CSS 新手，为按钮定义了以下 CSS 样式，并使用 id 并应用了自定义样式，但没有应用悬停和按下效果。

#bevel-grey {
  -fx-background-color: linear-gradient(#f2f2f2, #d6d6d6), linear-gradient(#fcfcfc 0%, #d9d9d9 20%, #d6d6d6 100%), linear-gradient(#dddddd 0%, #f6f6f6 50%);
  -fx-background-radius: 8, 7, 6;
  -fx-background-insets: 0, 1, 2;
  -fx-text-fill: black;
  -fx-effect: dropshadow( three-pass-box, rgba(0, 0, 0, 0.6), 5, 0.0, 0, 1);
}

#bevel-grey:hover {
  -fx-background-color: #981100;
}

#bevel-grey:pressed {
  -fx-background-color: #235891;
}

用 .button 替换 #bevel-grey 不会给我自定义效果，但适用于悬停和按下。如何让它与定义的自定义样式一起工作？

更新

主要代码，重现问题。

package application;

import java.util.List;
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.text.Font;
import javafx.scene.text.TextAlignment;


public class Main extends Application 
{
     @Override
     public void start(Stage primaryStage) 
     {
          try 
          {
              Pane p = new Pane();
              Scene scene = new Scene(p,400,400);
              Button b = new Button();
              b.setId("bevel-grey");
              b.getStylesheets().add(getClass().getResource("ButtonStyles.css").toExternalForm());
              b.setLayoutX(150);
              b.setLayoutY(300);
              b.setPrefWidth(100);
              b.setText("Start");
              p.getChildren().add(b);
              primaryStage.setScene(scene);
              primaryStage.show();
          } 
          catch(Exception e) 
          {
              e.printStackTrace();
          }
      }

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

Answer 1

据我了解该问题，正在应用 :hover 和 :pressed 指定的样式，但不会保留默认样式中的渐变。这是有道理的，因为:

#bevel-grey:hover {
  -fx-background-color: #981100;
}

替换声明的背景颜色:

#bevel-grey {
  -fx-background-color: linear-gradient(#f2f2f2, #d6d6d6), linear-gradient(#fcfcfc 0%, #d9d9d9 20%, #d6d6d6 100%), linear-gradient(#dddddd 0%, #f6f6f6 50%);
  /* ... omitted for brevity ... */
}

与#bevel-grey:pressed相同。如果您想继续使用线性渐变，您需要做的是更改线性渐变使用的颜色。一个明显的方法是简单地为每个伪类重新声明线性渐变(...)背景颜色，但使用新的渐变颜色。然而，我认为更易于维护的解决方案是使用所谓的 "looked-up colors" 。这是一个例子:

#bevel-grey {
  -fx-color-one: #d6d6d6;
  -fx-color-two: #d9d9d9;
  -fx-color-three: #f6f6f6;

  -fx-background-color:
      linear-gradient(#f2f2f2, -fx-color-one),
      linear-gradient(#fcfcfc 0%, -fx-color-two 20%, -fx-color-one 100%),
      linear-gradient(#dddddd 0%, -fx-color-three 50%);
  -fx-background-radius: 8, 7, 6;
  -fx-background-insets: 0, 1, 2;
  -fx-text-fill: black;
  -fx-effect: dropshadow( three-pass-box, rgba(0, 0, 0, 0.6), 5, 0.0, 0, 1);
}

#bevel-grey:hover {
  -fx-color-one: #981100;
  -fx-color-two: #981100;
  -fx-color-three: #981100;
}

#bevel-grey:pressed {
  -fx-color-one: #235891;
  -fx-color-two: #235891;
  -fx-color-three: #235891;
}

我不得不猜测一些颜色值，因为我不太确定你想要的最终结果是什么样子。上面的 CSS 给出以下输出:

<小时/>

顺便说一句，请考虑使用 :armed 而不是 :pressed 作为按钮控件。 :pressed 伪类只会通过按下鼠标来激活，而按钮可以通过其他操作来激活(例如按 Space 或 Enter 键(当按钮具有焦点时)。