Ext GWT更改鼠标上方的ContentPanel背景色

Ext GWT更改鼠标上方的ContentPanel背景色,gwt,background,mouseover,gxt,Gwt,Background,Mouseover,Gxt,在我的页面中,我有一个背景为白色的Gxt ContentPanel。但是,当用户将鼠标悬停在ContentPanel的标题上时,我希望背景改变颜色 我尝试使用Gxt组件的受保护addStyleOnOver方法来实现这一点,但没有任何效果。我还需要做些什么来使用这些方法(我已经在处理ONMOUSEOVER和ONMOUSEOUT事件),或者有更好的方法来更改背景吗?我不确定这是否有效,但您可以测试它 final ContentPanel test = new ContentPanel(); test

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


我尝试使用Gxt组件的受保护addStyleOnOver方法来实现这一点,但没有任何效果。我还需要做些什么来使用这些方法(我已经在处理ONMOUSEOVER和ONMOUSEOUT事件),或者有更好的方法来更改背景吗?

我不确定这是否有效,但您可以测试它

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");
    }
});
final ContentPanel test=new ContentPanel();
test.getHeader().addListener(Events.OnMouseOver,new Listener()){
@凌驾
公共无效handleEvent(BaseEvent be){
test.getHeader().setStyleName(“您的新样式”);
//或者test.setStyleName(“您的新样式”);
}
});

您可以简单地在标题中添加样式,然后添加一些css来更改颜色

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

# css
my_style:hover { background-color: yellow; }
如果您想在头的onMouseOver期间更改整个ContentPanel的bg,那么这就有点麻烦了。在这种情况下,将mouse-over事件添加到头中,handle事件将样式添加到内容面板(或内容面板主体,具体取决于您想要什么),然后将适当的样式添加到css中

# css
my_style { background-color: yellow; }

您可以使用下面的代码来完成这项工作

    ContentPanel contentPanel = new ContentPanel();
    contentPanel.setStyleName("background");
并在css中编写以下代码

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