Change Layout Color when Mouse over the button

HorizontalLayout horizontalLayout = new HorizontalLayout();
horizontalLayout.setHeight("100px");
horizontalLayout.setWidth("100px");

button = new Button("My Button");
button.setHeight("70px");
button.setWidth("70px");
button.addStyleName("mybutton");

horizontalLayout.addComponent(button);
horizontalLayout.setComponentAlignment(button, Alignment.MIDDLE_CENTER);

css
-----

.mybutton:hover {
background-color: #ddd;
}

Here mouse over the button, I want to change horizontalLayout color.
Please anybody help me....

The nearest that you can get with just CSS is changing the background colour of the horizontal layout when you hover over the layout itself, i.e.

HorizontalLayout horizontalLayout = new HorizontalLayout();
horizontalLayout.addStyleName("button-container");
horizontalLayout.setHeight("100px");
horizontalLayout.setWidth("100px");

button = new Button("My Button");
button.setHeight("70px");
button.setWidth("70px");
button.addStyleName("mybutton");

horizontalLayout.addComponent(button);
horizontalLayout.setComponentAlignment(button, Alignment.MIDDLE_CENTER);

css
-----
.button-container:hover {
background-color: #ddd;
}

Note - I think that IE6 only honours hover: on links.

If you *really* only want to change the layout background on hover-over-the-button, you'll have to code some javascript.

HTH,

Cheers,

Charles.

I am trying this ...changing the color of the vertical layout to something. And its not working. The code I have is

@Override
public void init() {
setTheme("addressbooktheme");
buildLayout();

}

private void buildLayout() {

Window mainWindow = new Window("Addressbook Application");
Label label = new Label("Hello Vaadin user");
mainWindow.addComponent(label);
setMainWindow(mainWindow);

VerticalLayout verLay = new VerticalLayout();
verLay.setSizeFull();
verLay.setCaption("My Vertical Layout"); // no affect
verLay.addStyleName("mystyle");
//verLay.addComponent(new Button("OK"));
mainWindow.addComponent(verLay);

}
}

and then I create s Theme, called addressbooktheme, inside which i have a style.css file. the contents of this file are

@import url(../reindeer/styles.css);

.mystyle {
background-color: green;
}

I am not sure why this is not working.