Capture mouse over (rollOver) layout?

General
1

Hi!

How can I capture a mouseOver event over a horizontal layout for example? I want to change the background when a user hovers over a component.

Thanks in advance!

2

Hi Bris,

Such visual style changes are best handled by CSS, and the :hover pseudo-class. And making a server round trip for mouseover will be quite slow and feel unresponsive for this sort of thing.

So use a custom theme and and additional style names for the component you want to set the color on hover.

// Java
myLayout.addStyleName("foobar");

// CSS
.foobar:hover {
   background-color: #ddd;
   }
3

Awesome :slight_smile:

I used “.v-absolutelayout-foobar” in the css file to make it work! Thank you very much!

4

Any quick solution for hover-effect: when user moves mouse over some layout, it would make a button appear inside the layout? Is this even possible without making a new component?

ie. VerticalLayout which contains a Button-component. When mouse is over the layout the button would appear and disappear when hovering outside of layout. Space for button should be reserved.

This kind of function/operation would be quite nice in layout-components, though it should probably only exist for making user experience better and that means no interaction with server-side. In example showing some operational buttons when hovering and when not hovering, displaying only what is important. Real-life example in attachment: Twitters tweet-display (quite advanced example though)
11623.png

5

This is already possible using Vaadin & CSS. Sure, there are some limitiations (the component being hidden/displayed must be inside the component being hovered over; I suspect IE6 and maybe 7 will have issues with the :hover pseudoclass) - but essentially,

  1. Create the parent component with the all of the buttons added.
    e.g.
      Layout tweetLayout = new ...
       tweetLayout.addStyleName("tweet");
       Layout buttons = new ...
       buttons.add(new Button("Favourite"));
       buttons.add(new Button("Retweet"));
       buttons.add(new Button("Reply"));
       buttons.addStyleName("buttons");
       tweetLayout.add(buttons);
  1. Add the following to the styles.css for your app
.tweet .buttons {
  visibility: hidden;
}

.tweet:hover .buttons {
  visibility: visible;
}

And that’s it!
I’ve done this in one of my prototype projects using Vaadin, and it works just fine.

HTH,

Cheers,

Charles

6

Hi Charles.

I was looking to do that. It works for what I need. Thank you very much.

Greetings from Colombia :slight_smile:

7

Great, that’s just the solution I was looking for!

Thank you Charles!

8

thank you Charles for providing a solution for a problem that at first seemed extremely hard to work around!

9

Hi Ville,

The capture that you paste in the thread about rollOver is any Vaadin Addon?, or is an example of you. Is posible to acces to the source code of this capture?

Best regards