2

我正在构建一个 Windows 8 Metro 风格的应用程序，我想将磁贴的样式与开箱即用的磁贴样式稍有不同。当用户将鼠标悬停在磁贴 (div) 上时，它周围会出现一个灰色框。这是一个屏幕截图。

Windows 8 应用程序的屏幕截图，磁贴周围有灰色边框

但是代码中没有与这些灰色边框相关联的 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;
}

有任何想法吗？

4

4 回答 4

5

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

#myList .win-container:hover {
    outline: none;
}
于 2012-09-26T01:04:33.107 回答
3

我假设您正在列表视图中渲染内容。

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

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

如果您不使用 ListView，请发布您用于创建屏幕截图的 HTML。

于 2012-09-25T21:29:50.503 回答
0

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

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

于 2012-09-25T21:30:50.503 回答
0

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

于 2012-09-25T23:50:26.913 回答