的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樣式列表視圖

回答

相關問題