JavaFX8如何将“按”状态传递给孩子？

Question

I have an ImageView in a Pane, and the pane has been set a MouseEventHandler to do some actions.

The ImageView's Image is defined in a CSS file as below:

.imageView{
    -fx-image: url("image/normal.png");
}

.imageView:pressed{
    -fx-image: url("/image/press.png");
}

Under normal status, the ImageView's image is 'normal.png'. When the user presses the ImageView, its image will be changed to 'press.png'. Then, when released, its image will be changed back to 'normal.png'.

However, if the user does not press on the ImageView's image exactly, even though Pane's MouseEvent is trigged, the image will not be changed.

How can I do to change ImageView's image when its parent Pane is pressed. For instance, on Android, the image will be switched automatically. It is very convenient.

Answer 1

Add a style class to the pane ("image-container", for example), then in the css do

.imageView{
    -fx-image: url("image/normal.png");
}

.image-container:pressed .imageView {
    -fx-image: url("/image/press.png");
}