لماذا لا يعمل تأثير الإنتقال على الزر؟

في هذا الكود:

#button{
    -fx-text-fill: blue;
    -fx-alignment: center;
    -fx-background-color: green;
    -fx-padding: 20px 15px;
    -fx-cursor: pointer;
    -fx-border-radius: 8px;
    -fx-background-radius: 8px;
    -fx-pref-width: 100px;
}
#button:hover{
    -fx-background-color: red;
    -fx-pref-width: 300px;
    -fx-transition: 200px 1s, red 1s;
}

import javafx.application.Application;  
import javafx.scene.Scene;  
import javafx.scene.control.Button;  
import javafx.scene.layout.StackPane;  
import javafx.scene.paint.LinearGradient;  
import javafx.scene.paint.RadialGradient;  
import javafx.scene.paint.Stop;  
import javafx.scene.paint.Paint;  
import javafx.scene.paint.Color;  
import javafx.scene.shape.Rectangle;  
import javafx.stage.Stage;  


public class main extends Application {  
    @Override  
    public void start(Stage primaryStage) {  
        Button button = new Button("زر بتدرج لوني");  
        button.setId("button"); 
        StackPane root = new StackPane();  
        root.getChildren().add(button);  
        Scene scene = new Scene(root, 300, 200);  
        scene.getStylesheets().add(getClass().getResource("css.css").toExternalForm());
        primaryStage.setTitle("مثال على زر بتدرج لوني");  
        primaryStage.setScene(scene);  
        primaryStage.show();  
    }  

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

حاولت تقليد المثال المذكور في دورة تعلم CSS في درس التأثرات الإنتقالية:

<!DOCTYPE html>
<html>
    <head>
        <style>
.btn {
    color: #fff;
    text-align: center;
    background-color: dodgerblue;
    padding: 20px 15px;
    cursor: pointer;
    border-radius: 8px;
    width: 200px;
    transition-property: width, background-color;
    transition-duration: 1s;
}


.btn:hover {
    width: 300px;
    background-color: blueviolet;
}
        </style>
    </head>
    <body>
        <h2>Add transition effect to multiple properties</h2>
        <p>Hover over the div element below, to see the transition effect.</p>
        <div class="btn">Hover Me</div>
        <p>Note: The transition effect will take 1 second to complete.</p>
    </body>
</html>

Java

CSS

Programming

JavaFX

كيرياكوس اسعيد

منذ 4 أشهر

تعليقات 1

أضف تعليق

يجب تسجيل الدخول حتى تتمكن من إضافة تعليق أو رد.

لماذا لا يعمل تأثير الإنتقال على الزر؟

كيرياكوس اسعيد

تعليقات 1

أضف تعليق

هدف الموقع

روابط مهمة

حقوق النشر

الدورات

أدوات مساعدة

أقسام الموقع

إبحث