Vaadin 面板在鼠标悬停时突出显示

Question

我有一套 Vaadin 的面板。

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

能否举例说明如何在 Vaadin 中完成此操作？

Answer 1

正如 André 指出的那样，对于鼠标悬停，请在您的样式中使用 :hover sheet 并使用 setStyle("your-special-panel") 设置样式。请参阅 here 以供参考。对于点击后样式的变化，首先在面板中添加一个ClickListener(addClickListener(..))。在该点击侦听器中，您调用 addStyle("style-class-clicked-panel")，然后在您的样式 sheet 中引用样式 class 以实现点击外观。

在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 */
}

Vaadin 面板在鼠标悬停时突出显示

Vaadin Panel highlight on mouseover

vaadin

vaadin7