In my app I change button graphic for hover and armed button states:

.button:hover {
    -fx-graphic: url("hover.png");
}

.button:armed {
    -fx-graphic: url("armed.png");
}

When I press and release mouse button outside of the graphic bounds I get correct change of button image according to hover/armed events.
When I do the same with the mouse cursor within the graphic bounds it all gets broken and starts to behave as if the button just toggles between armed and hover states.