如何使用Vaadin按钮鼠标悬停
如何使用Vaadin按钮鼠标悬停
提问于 2016-09-03 05:11:42
有人能给我一些基本的步骤来添加鼠标悬停到我的项目中的图像吗？我有一个按钮创建和样式像一个链接，但我希望图像更改为一个不同的大小相同的时候，用户的光标在图像的顶部。我知道我必须在style.css文件中添加一些东西。我已经读了几个论坛的帖子，但似乎不能让它工作。
workingButton.setStyleName(BaseTheme.BUTTON_LINK);
workingButton.setIcon(new FileResource(new File(basepath + "help.png")));谢谢。
回答 1
Stack Overflow用户
发布于 2016-09-15 22:42:00
使用Button.setIcon方法将添加一个img元素，这意味着不能使用CSS更改src属性(或者至少不能对所有浏览器可靠地更改)。
但是，您可以通过使用一个CSS background-image以及按钮图像的伪类:hover (而不是按钮上的setIcon方法)来实现所需的功能。为此，请执行以下操作：
i.确保两个镜像(正常和悬停)在您的项目中可访问
二、在您的服务器端代码中添加按钮：
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;
}这将实现以下结果：
正常情况下：
当悬停在上面时：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39300757
复制相关文章
相似问题
腾讯云开发者
