gwt - Ext GWT 在鼠标悬停时更改 ContentPanel 背景颜色

Question

在我的页面中，我有一个白色背景的 Gxt ContentPanel。但是，当用户将鼠标悬停在 ContentPanel 的标题上时，我希望背景更改颜色。

我尝试通过使用 Gxt 组件的受保护的 addStyleOnOver 方法来实现这一点，但它没有任何效果。我还需要做些什么来使用这些方法（我已经在处理 ONMOUSEOVER 和 ONMOUSEOUT 事件），还是有更好的方法来改变背景？

Answer 1

您可以使用以下代码执行此操作

    ContentPanel contentPanel = new ContentPanel();
    contentPanel.setStyleName("background");

并在您的CSS中编写以下代码

   .background:hover .x-panel-body {background-color: red !important;}

Answer 2

您可以简单地向标题添加样式，然后添加一些 CSS 来更改颜色。

test.getHeader().addStyleName("my_style")

# css
my_style:hover { background-color: yellow; }

如果您想在标题的 onMouseOver 期间更改整个 ContentPanel 的 bg，这有点棘手，在这种情况下，将鼠标悬停事件添加到标题，其中句柄事件将样式添加到内容面板（或内容面板主体取决于你想要什么），然后为你的css添加适当的样式。

# css
my_style { background-color: yellow; }

Answer 3

我不确定这是否有效，但你可以测试它......

final ContentPanel test = new ContentPanel();
test.getHeader().addListener(Events.OnMouseOver, new Listener<BaseEvent>() {
    @Override
    public void handleEvent(BaseEvent be) {
        test.getHeader().setStyleName("your_new_style");
        // or test.setStyleName("your_new_style");
    }
});