Question

我正在构建一个Windows 8 Metro风格的应用程序，我想要将瓷砖的样式与开箱即用的样式略有不同。当用户将鼠标悬停在图块（div）上时，它周围会出现一个灰色框。这是一个截图。

Screenshot of Windows 8 app with grey border around a tile

但代码中没有与这些灰色边框关联的CSS样式。

我尝试使用以下代码覆盖它。但它没有用。

div:hover {
  border: none;
}

[在回复评论时添加] 以下是HTML：

<body>
    <h1>App title</h1>
    <div id="categoriesTemplate" data-win-control="WinJS.Binding.Template">
        <div class="category">
            <a href="#" data-win-bind="innerText:title"></a>
        </div>
    </div>   

    <div id="headerTemplate" 
            data-win-control="WinJS.Binding.Template" 
           style="display: none">
        <div class="simpleHeaderItem">
            <h1 data-win-bind="innerText: title1"></h1>
        </div>
     </div>

  <div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template" 
       style="display: none">
        <div class="semanticZoomItem">
            <h1 class="semanticZoomItem-Text" 
                data-win-bind="innerText: title1">
             </h1>
        </div>
    </div>


   <div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom"> 
          <div id="categoriesListView"
            data-win-control="WinJS.UI.ListView"
            data-win-options="{itemTemplate:categoriesTemplate,
           groupHeaderTemplate: headerTemplate
           ,layout: {type: WinJS.UI.GridLayout} }">
        </div>  
      <div id="zoomedOutListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{itemTemplate: semanticZoomTemplate, 
                           selectionMode: 'none', 
                           tapBehavior: 'invoke', 
                           swipeBehavior: 'none' }">

        </div>
   </div>
</body>

这是CSS。

div.category:hover {
    width: 180px; 
    height: 50px;
    background-color:#f6f4d3;
    text-align:center;
    padding-top:25px;
    color: #f6f4d3;
    outline:none;
    border:none;
}

有什么想法吗？

Answer 1

Jeff对于样式选择器是正确的。但是，您不需要background-color属性。大纲：透明的作品本身。我刚尝试过。

#myList .win-container:hover {
    outline: none;
}

Answer 2

我假设你在列表视图中渲染东西。

将以下样式添加到您的CSS ...

#idOfYourListView .win-container:hover {
    background-color: red; 
    outline: orange solid 5px;
}

如果您没有使用ListView，请发布您正在使用的HTML来创建屏幕截图。

Answer 3

悬停样式可能与链接相关联，可能与该元素相关，而不是该元素的div。

正如KRyan建议的那样，使用调试器找出您要定位的元素，否则尝试更改CSS文件中的某些 a 或其他悬停元素，试错，直到找到合适的人。

Answer 4

要调试使用HTML / CSS / JS的WinRT应用程序，只需F5你的应用程序，当它运行时，你去Visual Studio中的DOM资源管理器。如果您没有将其视为选项卡，请转到Debug | Windows | DOM Explorer（如果你还没有看过JavaScript控制台，你也应该看看它！）。现在，您可以点击“选择元素”按钮（靠近DOM资源管理器的顶部），然后在应用程序中选择一个元素。

在Windows 8 Metro风格应用中删除div周围的灰色边框（悬停时）

4 个答案: