我正在制作一个马里奥主题的应用程序,我希望按钮的效果是当用户将鼠标悬停在它上面时,按钮文本旁边会出现一个蘑菇(图像),并且当鼠标移开时消失。我正在尝试使用 css 来做到这一点。
如何做到这一点?
最佳答案
使用悬停伪类。
.button:hover{
-fx-graphic: url('your_path_to_image');
}
完整示例
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Main extends Application {
public void start(Stage primaryStage) {
Button button = new Button("Click");
HBox container = new HBox(button);
container.setAlignment(Pos.CENTER);
Scene scene = new Scene(container, 200, 200);
scene.getStylesheets().add(getClass().getResource("/style.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
样式.css
.button:hover{
-fx-graphic: url('http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/png/16/Mushroom%20-%201UP.png');
}
图片
悬停
关于css - javafx 8 使用 css 在悬停按钮上创建图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29866599/