ボタンホバーと押された効果CSSのJavaFX

ラクシュミナラヤナン：

私は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);
      }
}

なスロー：

私は問題を理解しているように、スタイルはで指定: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ボタンが追加のアクション（例えば押すスペース/ボタンにフォーカスがあるときにキーを入力してください）で武装することができ、一方、疑似クラスは、押され、マウスでアクティブになります。

ボタンホバーと押された効果CSSのJavaFX

おすすめ