JavaFX – CSS Style list

I have a listview and want the following:

>Odd rows of white background color > listview: when the mouse hovers over an item, it is highlighted in blue; > Listview: draw with gradient when selecting items; > Listview: when the listview loses focus, the selected item should be drawn with gradient; > Listview: all items will start with text filled in black However, it turns white when hovering and / or selecting

That's my code. It works normally, except for even lines: when the mouse hovers, it highlights in white Therefore, the white text cannot be displayed What's wrong with it?

.list-cell:filled:selected:focused,.list-cell:filled:selected {
    -fx-background-color: linear-gradient(#328BDB 0%,#207BCF 25%,#1973C9 75%,#0A65BF 100%);
    -fx-text-fill: white;
}

.list-cell:odd {
    -fx-cell-hover-color: #0093ff;
    -fx-background-color: white;
}

.list-cell:filled:hover {
    -fx-cell-hover-color: #0093ff;
    -fx-text-fill: white;
}

Thank you in advance

Solution

Edit:

Change your CSS slightly:

.list-cell:filled:selected:focused,#0A65BF 100%);
    -fx-text-fill: white;
}

.list-cell:even { /* <=== changed to even */
    -fx-background-color: white;
}

.list-cell:filled:hover {
    -fx-background-color: #0093ff;
    -fx-text-fill: white;
}

This CSS produces the following presentation:

Does this give you what you expect?

I became strange even The first cell is uniform because its index value is 0 (zero) In addition, - FX cell hover color is invalid I changed it to - FX background color and need to or delete it

Original text: (note that this has different explanations for odd / even numbers)

My approach is as follows: (I include your requirements in the numbering list for reference, I also make the gradient more obvious and add a green background to the uniform cells.)

/*
1. Odd rows with white background color;
2. ListView: when mouse over an item,highlight with a blue shade;
3. ListView: when an item is selected,paint it with a gradient;
4. ListView: when focus is lost from ListView,selected item should be painted with gradient;
5. ListView: all items will start with text-fill black. But on mouse over and/or selected it will change to white.
*/

.list-cell:filled:selected:focused,.list-cell:filled:selected {
    /* 3:,4: */
    -fx-background-color: linear-gradient(#333 0%,#777 25%,#aaa 75%,#eee 100%);
    -fx-text-fill: white; /* 5 */
}
.list-cell { -fx-text-fill: black; /* 5 */ }
.list-cell:odd { -fx-background-color: white; /* 1 */ }
.list-cell:even { -fx-background-color: #8f8; /* for information */ }
.list-cell:filled:hover { 
    -fx-background-color: #00f; /* 2 */
    -fx-text-fill: white; /* 5 */
}

This leads to this rendering: