的JavaFX - CSS样式列表视图

与白色背景的彩色奇数行;
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; 
}

在此先感谢。

来源

2013-03-26 Leonardo

编辑：

稍微改变你的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生成以下演示：

ListView presentation variant 1

这是否让你想到了什么？

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

这导致了这种渲染：

ListView rendering variant 2

来源

2013-03-27 14:28:24

感谢您的回答。但我的主要问题是奇数选定的行。在鼠标悬停时，它是'-fx-text-fill'工程并获得白色。但它的背景颜色也变白了。 – Leonardo 2013-03-27 15:24:21

我有一个印象，你可能会对其中的哪个单元是偶数，哪个单数是奇数的其他期望。我添加了一个稍微修改过的css变体，它不会给出完全白色的单元格。那个更好吗？ – 2013-03-27 18:14:15

的JavaFX - CSS样式列表视图

回答

相关问题