JavaFX - CSS样式列表视图

Question

我有一个ListView,想要以下内容:

• 奇数行,白色背景色;
• ListView:当鼠标悬停在某个项目上时,突出显示为蓝色;
• ListView:当选择一个项目时,用渐变绘制它;
• ListView:当从ListView中丢失焦点时,所选项应使用渐变绘制;
• ListView:所有项目都将以文本填充黑色开头.但是鼠标悬停和/或选中它将变为白色.

那是我的代码.它的工作正常,除了偶数行:在鼠标悬停时,它以白色突出显示.所以,文字的白色并不能显示.它出什么问题了？

.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;
}

提前致谢.

Answer 1

编辑:

略微改变你的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;
}

此css产生以下演示:

这会给你的期望吗？

我换odd了even.第一个单元格是偶数,因为它的索引值是0(零).也-fx-cell-hover-color无效.我将其更改为-fx-background-color需要或删除它.

原文:(请注意,这对奇数/偶数有不同的解释)

我的看法是这样的:(
我把你的要求包含在编号列表中以供css参考.我也使渐变更明显,并为偶数单元添加了绿色背景.)

/*
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 */
}

这导致了这种渲染: