Эффект наведения на иконку

Я хотел бы создать такие кнопки для навигации по панели настроек:

введите здесь описание изображения

Можете ли вы сказать мне, как я могу создать этот эффект наведения на значки? Самая сложная часть для меня — создать код CSS, который выглядит как на картинке.


javafx javafx-8 javafx-2
person Peter Penzov    schedule 22.11.2013    source источник

Ответы (3)


arrow_upward
14
arrow_downward

Вы должны использовать события MouseEntered и MouseExited для получения эффектов наведения на значки. попробуй это работает........

btnsa.setStyle("-fx-background-color:transparent;");
btnsa.setGraphic(new ImageView(new Image(getClass().getResourceAsStream("JavafxSm.gif"))));

btnsa.setOnMouseEntered(new EventHandler<MouseEvent>() {

    @Override
    public void handle(MouseEvent t) {
        btnsa.setStyle("-fx-background-color:#dae7f3;");
    }
});

btnsa.setOnMouseExited(new EventHandler<MouseEvent>() {

    @Override
    public void handle(MouseEvent t) {
        btnsa.setStyle("-fx-background-color:transparent;");
    }
});

некоторые снимки приведенного выше кода......

введите здесь описание изображения

введите здесь описание изображения

person Yogesh Soni    schedule 23.11.2013
comment
ИМХО это не лучшее решение проблемы. Вы можете сделать это в чистом CSS, см. мой ответ ниже - person tomsontom; 25.11.2013

arrow_upward
31
arrow_downward

Хотя приведенный выше ответ работает. Вы действительно должны сделать это полностью в CSS, используя псевдоселекторы:

Джава:

btnsa.getStyleClass().add("myButton");

CSS:

.myButton {
  -fx-background-color:transparent;
}

.myButton:hover {
  -fx-background-color:#dae7f3;
}
person tomsontom    schedule 25.11.2013

arrow_upward
1
arrow_downward

Вместо этого вы можете сделать только 1-строчный код в CSS, если ваш файл FXML связан с CSS.

yourButtonId:hover{-fx-background-color: #6695e2}
person NM Naufaldo    schedule 21.03.2019
comment
и это отличается от ответа Тома тем, что ...? - person kleopatra; 21.03.2019
comment
Вам не нужно добавлять этот код CSS .myButton { -fx-background-color:transparent; } - person NM Naufaldo; 22.03.2019