Change Layout Color when Mouse over the button

General
1

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…

2

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.

3

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

[font=Courier New]

@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);
	
}

}
[/font]

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

[font=Courier New]
@import url(…/reindeer/styles.css);

.mystyle {
background-color: green;
}
[/font]

I am not sure why this is not working.