CODEWITHSUNDEEP
cssbuttonjavafxhoverpressed
Fernando Gaggero
Fernando Gaggero

Reputation: 81

Hover and pressed in javafx

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?

Upvotes: 8

Views: 25472

Answers (1)

James_D
James_D

Reputation: 209225

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;
}

Upvotes: 19

Related Questions