Javafx 2 图标上方的悬停效果

我想为设置面板导航创建如下按钮：

---

你能告诉我如何在图标上创建这种悬停效果吗？对我来说，最困难的部分是创建类似于图片的CSS代码。

你必须使用MouseEntered和MouseExited事件来获得图标上方的悬停效果。 试试这个，它能用

btnsa.setStyle（“-fx背景色：透明；”）；
setGraphic（新图像视图（新图像（getClass（）.getResourceAsStream（“JavafxSm.gif”）））；
setOnMouseCentered（新的EventHandler（）{
@凌驾
公共无效句柄（MouseEvent t）{
btnsa.setStyle（“-fx背景色：#dae7f3；”）；
}
});
setOnMouseExited（新的EventHandler（）{
@凌驾
公共无效句柄（MouseEvent t）{
btnsa.setStyle（“-fx背景色：透明；”）；
}
});

以上代码的一些快照

---

尽管上述答案有效。您应该使用伪选择器在CSS中完全做到这一点：

爪哇：

css:

---

相反，如果您的FXML文件与CSS连接，您可以在CSS中只执行一行代码

yourButtonId:hover{-fx-background-color: #6695e2}

---

我认为这不是解决问题的最好办法。你可以用纯CSS来做这件事，看看我下面的答案，这和tom的答案有什么不同？您不需要添加此CSS代码

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

.myButton:hover {
  -fx-background-color:#dae7f3;
}

yourButtonId:hover{-fx-background-color: #6695e2}