Vaadin面板突出显示鼠标悬停

Question

我有一套Vaadin的小组。

我需要在鼠标悬停事件上突出显示每个面板组件，并在鼠标输出时释放突出显示。同样点击我需要永久地将组件的样式更改为另一个。

请您举例说明如何在Vaadin中完成这项工作？

Answer 1

正如André指出的那样，鼠标在样式表中使用:hover并使用setStyle("your-special-panel")设置样式。请参阅here以获取参考。要在单击后更改样式，请先向面板添加ClickListener（addClickListener(..)）。在该单击侦听器中，您调用addStyle("style-class-clicked-panel")，然后在样式表中引用所单击外观的样式类。

在Java中：

[...]
@Override
public void click(ClickEvent event){
    // handle the click event
    panel.addStyle("style-class-clicked-panel");
}

在Css中：

.your-special-panel:hover {
    background-color: red;  /* style for on mouse */
}

.style-class-clicked-panel{
    background-color: yellow; /* style for clicked */
}