Hover and pressed in javafx

Question

I wrote this css code for button pressed

  .button:pressed {
        -fx-scale-y: 0.9;
        -fx-scale-x: 0.9;
}

and this for button hover

 .button:hover {
        -fx-background-color: #383838;
        -fx-scale-y: 1.1;
}

and it doesn't scale down because for the button to be clicked it obviously has to be hovered. Is there any way to cancel the hover code when the button is being pressed?

Answer 1

Either:

reverse the order of the rules, so that the rule for pressed comes after the rule for hover (and thus takes precedence):

.button:hover {
    -fx-background-color: #383838;
    -fx-scale-y: 1.1;
}

.button:pressed {
    -fx-scale-y: 0.9;
    -fx-scale-x: 0.9;
}

or, make the rule for pressed more specific than the rule for hover by explicitly applying it to a button that is both pressed and hovered:

.button:pressed:hover {
    -fx-scale-y: 0.9;
    -fx-scale-x: 0.9;
}

.button:hover {
    -fx-background-color: #383838;
    -fx-scale-y: 1.1;
}