Кнопка Hover и нажатый эффект 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;
}

Замена #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);
      }
}

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. Вам нужно изменить цвета, используемые линейными градиентами, если вы хотите продолжать использовать линейные градиенты. Очевидный способ сделать это - просто повторно объявить 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 дает следующий вывод:

---

В качестве альтернативы рассмотрите возможность использования :armed вместо :pressed для кнопки управления. Псевдокласс :pressed активируется только при нажатии мыши, в то время как кнопка может быть активирована дополнительными действиями (например, нажатием клавиши Пробел или Ввод , когда кнопка находится в фокусе ).