已选择 WinJS 列表视图样式

Question

我希望在选择 WinJS Listivew .win-item 时更改 CSS 样式（通过右键单击 || 向下滑动）。

基本上，我有两组数据将显示在 ListView 中。一个在加载时（默认...当前#itemName），一个在项目被选择、悬停或聚焦时。 （目前#itemValue and IMG）

我有一个WinJS.Binding.Template，如下：

<div id="itemTemplate" data-win-control'WinJS.Binding.Tempalte">
    <div id="imageContainer">
        <h4 id="itemName" data-win-bind="textContent: itemName"></h4>
        <h4 id="itemValue">$0.00</h4>
        <img src="#" alt="">
    </div>
</div>

在我的 .CSS 文件中，我目前有以下内容：

/** note IMG and #itemValue opacity previously set to 0 **/
#itemList .win-item:hover #itemName, #itemList .win-item:focus #itemName {opacity 0;}
#itemList .win-item:hover IMG, #itemList .win-item:focus IMG{opacity 0;}
#itemList .win-item:hover #itemValue, #itemList .win-item:focus #itemValue{opacity 0;}

我想在一个项目被选中但没有主动聚焦或悬停时保持这种样式。

Answer 1

我相信你想要::selection。从 Visual Studio 运行您的应用程序，选择一个项目，然后返回 VS 并查看 DOM Explorer。单击 DOM Explorer 选项卡正下方的“选择元素”。然后在您的应用程序中单击您选择的项目。这将带您回到 VS。看看 Styles 和 Trace Styles 窗格，至少在 Visual Studio Ultimate 中它们位于右侧。您会看到 ::selection 是所选项目的样式。只需在您自己的 CSS 文件中为 ::selection 设置 opacity 0。

如果您想在示例应用中使用它，请查看 MSDN 上的 HTML ListView Essentials sample。

编辑：试试.win-selectionbackground：

.win-selectionbackground {
    opacity: 0;
}