.v-tree-node and CSS hover


I am trying to add a hover color when the mouse browse a tree. The idea is to get the same feature as for a table (where a individual node of the tree would be just like a row in the table).

I tried this

.v-tree-node:hover {
    background-color: #b4ecef;

This works like I expect for the root node but If expand a node, then the whole structure has the bacgkround, not where my mouse is. Which style should I set to have this.


.v-tree-node-caption is for the whole div of caption, but then the selection background is in the span of the caption, so perhaps v-tree-node-caption:hover span { } would do the trick.


This does almost what I want

.v-tree-node-caption:hover {
    background-color: #b4ecef;

It’s better but it still does not highlight the complete row (only as from the caption)

Any idea?

try this

tree.setItemStyleGenerator(new Tree.ItemStyleGenerator() {

                    private static final long serialVersionUID = 1L;

                    public String getStyle(Object itemId) {
              //add some business logic
                        return "gray";


.v-tree-node-gray {
font-weight: normal;
color: gray;

Hi Stéphane,

What you’re after, is unfortunately not possible with the current DOM structure of the Tree. There’s been many times I would’ve liked to style the tree node like a row, but there’s just no way of making that happen because of how the Tree is structured and how it responds to mouse clicks (read: it’s a terribly designed for styling).

I hope to fix this at some point in Vaadin 7 (when the Tree widget is rewritten in any case).

Thanks for the feedback, Jouni.

Hi Jouni,

I’m struggling with the same problem in Vaadin 7. Did things change?

Thank you.

Hi Guys,

Well I don’t know how it is with 7 but in 6.8.9 which I need to use for various reasons
I just needed to do that and since I am not very good with CSS I was looking to add
underline on hover with text color change. What I ended up with is this:

.v-tree-node span:hover {
text-decoration: underline;
text-underline-color: blue;
color: blue;

and that works very well for me.
To be more specific one could use:

tree.setItemStyleGenerator(new Tree.ItemStyleGenerator(){ …

and use the same approach although have not tested it personally.

Hope this helps ?