JavaFX - CSS styling listview - css

Question

I have a ListView and want the following:
Odd rows with white background color;
ListView: when mouse over an item, highlight with a blue shade;
ListView: when an item is selected, paint it with a gradient;
ListView: when focus is lost from ListView, selected item should be painted with gradient;
ListView: all items will start with text-fill black. But on mouse over and/or selected it will change to white.
That's my code. It's working fine, except for the even rows: on mouse over, it highlight in white. So, the text's white and can't be showed. 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;
}
Thanks in advance.

Answer 1

EDIT:
Slightly changing your css:
.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: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 what you expect?
I changed odd to even. The first cell is even, because its index value is 0 (zero). Also -fx-cell-hover-color is not valid. I changed it to -fx-background-color where needed or removed it.
Original text: (note that this has different interpretation of odd/even)
My take would be this:
(I included your requirements in a numbered list for reference in the css. I also made the gradient more obvious and added a green background for even 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: