Hover

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I would like to have hover effects shown when a user hovers over a layout. I read on the forum that I have to use CssLayout to do this. I tried just :

  CssLayout  labelLayout = new CssLayout ();
  labelLayout.addStyleName("accordianLabelLayout");
  labelLayout.addComponent(label);

with the following styles:

.accordianLabelLayout{
color:red;
}
.accordianLabelLayout: hover{
color:white;
}

I see red text, but not white when hovering. What am I doing wrong?

Thanks,

Mark

2

There shouldn’t be a space before the hover pseudo-class -

.accordianLabel:hover {
   color:white;
}

See
http://reference.sitepoint.com/css/pseudoclass-hover

p.s. There’s no need to use the CSS Layout, that css would work with any layout. CSSLayout is simply for using CSS to do the layout (size, position) of it’s components. You are free to use CSS to style your components in any container.

Cheers,

Charles

3

Although, reading the answer a bit closer, I see you want to change the color of the label when hovering over the
layout
 that the container is in. What I’ve suggested should work, but it might not - you might have to do

.accoridianLabel:hover .v-label {
color:white;
}

Which ultimately means “match any v-label inside an accordianLabel when the mouse is hovering over the layout”

Cheers,

Charles.

4

Thank you thank you!

Was up late last night and was blind to that one extra ‘little’ space, which proved to be exactly the problem! Yay!

Best,

Mark