How to handle mouse event FXML

Question

So I'm building this application for a school project and I just can't seem to figure out the following:

(Using scenebuilder by the way)

I want to use an image as a button, so I made a button and set an image on the button. I then made the background color for the button transparent so you would only see the image. Sadly enough when doing this, the image remains there as a static image that does not move whenever you click on it so you don't really have the click effect.

First we were coding the application in Fx but then later we decided to work with fxml. But, when I was still coding in fx I did get this working by using eventhandlers to simulate the "click" like:

button5.addEventHandler(MouseEvent.MOUSE_ENTERED, (MouseEvent e) -> {
        button5.setScaleX(1.1);
        button5.setScaleY(1.1);
    });


    button5.addEventHandler(MouseEvent.MOUSE_PRESSED, (MouseEvent e) -> {
        button5.setEffect(shadow);
    });

But that doesn't seem to work now, or I just don't know how to do it haha. I'm very new to this and I can't seem to get the controller to make this work.

Hope somebody knows what I mean and how to solve this!

Answer 1

Use CSS. For example, you could do something like

.button:pressed > .image-view {
    -fx-opacity: 80%;
}