3

我是 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;
}

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

更新

主要代码，重现问题。

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);
      }
}
4

1 回答 1

4

据我了解这个问题，由: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. 如果您想继续使用所述线性渐变，您需要做的是更改线性渐变使用的颜色。linear-gradient(...)一个明显的方法是简单地为每个伪类重新声明背景颜色，但使用新的渐变颜色。但是，在我看来，更易于维护的解决方案是使用所谓的“查找颜色”。这是一个例子：

#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 给出了以下输出：

使用演示 CSS 的示例应用程序的 GIF

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

于 2020-02-21T09:25:21.863 回答