按钮悬停和按下效果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 相同。如果您想继续使用所述线性渐变，您需要做的是更改线性渐变使用的颜色。一个明显的方法是简单地为每个伪 class 重新声明 linear-gradient(...) 背景颜色，但使用新的渐变颜色。但是，我认为更易于维护的解决方案是使用所谓的 "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 pseudo-class 只会通过按下鼠标激活，而按钮可以通过其他操作（例如按下 Space或 Enter 键，同时按钮具有焦点）。

按钮悬停和按下效果CSS Javafx

Button Hover and pressed effect CSS Javafx

java

javafx

javafx-css