java - 如何进行 Vaadin 按钮鼠标悬停

Question

任何人都可以告诉我在项目中将鼠标悬停添加到图像的基本步骤吗？我创建了按钮并将其样式设置为链接，但我希望当用户的光标位于图像顶部时，图像更改为相同大小的不同图像。我知道我必须向 style.css 文件添加一些内容。我已经阅读了几个论坛主题，但似乎无法使其工作。

workingButton.setStyleName(BaseTheme.BUTTON_LINK);
workingButton.setIcon(new FileResource(new File(basepath + "help.png")));

谢谢。

Answer 1

使用 Button.setIcon 方法将添加 img 元素，这意味着 src 属性无法使用 CSS 进行更改(或者至少对于所有浏览器来说不可靠)。

但是，您可以通过使用 CSS background-image 来实现您想要的效果以及按钮图像的 :hover 伪类(而不是按钮上的 setIcon 方法)。为了做到这一点:

我。确保您的项目中可以访问 2 个图像(正常图像和悬停图像)

ii.在服务器端代码中添加按钮:

Button cssButton = new Button("CSS Hover");
cssButton.setStyleName(BaseTheme.BUTTON_LINK);
cssButton.setId("cssBtn");

三．添加以下 CSS:

#cssBtn {
   padding: 0 40px;
   background-image: url("images/help.png");
   background-repeat: no-repeat;
}

#cssBtn:hover {
  padding: 0 40px;
  background-image: url("images/help_invert.png");
  background-repeat: no-repeat;
}

这将实现以下结果:

通常:

当鼠标悬停在: