Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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.