如何做Vaadin Button Mouseovers

Question

任何人都可以给我一些基本步骤，将鼠标悬停在我的项目中的图像上吗？我创建了按钮并设置了类似链接的样式，但是当用户的光标位于图像顶部时，我希望图像更改为相同大小的不同图像。我知道我必须在style.css文件中添加一些东西。我已经阅读了几个论坛帖子，似乎无法让它发挥作用。

{{1}}

感谢。

Answer 1

使用Button.setIcon方法将添加img元素，这意味着无法使用CSS更改src属性（或者至少对所有浏览器都不可靠）。

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

我。确保项目中可以访问2张图像（正常和悬停）

II。在服务器端代码中添加按钮：

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

III。添加以下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;
}

这将达到以下结果：

通常：

当盘旋：