Css 删除Windows 8 Metro风格应用程序中div周围的灰色边框（悬停时）_Css_Windows 8_Windows Runtime

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

css windows-8 windows-runtime

Css 删除Windows 8 Metro风格应用程序中div周围的灰色边框（悬停时）,css,windows-8,windows-runtime,Css,Windows 8,Windows Runtime,我正在构建一个Windows 8 Metro风格的应用程序，我想将瓷砖的风格与开箱即用的略有不同。当用户将鼠标悬停在平铺（div）上时，其周围会出现一个灰色框。这是一个截图但是代码中没有与这些灰色边框关联的CSS样式我尝试使用以下代码重写它。但它不起作用 div:hover { border: none; } [根据评论添加]以下是HTML： <body> <h1>App title</h1> <div id="categor

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

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

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

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

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

正如KRyan所建议的，使用调试器找出您要针对的元素，否则尝试更改CSS文件中的一些a或其他悬停元素，反复尝试，直到找到正确的元素。
要调试使用HTML/CSS/JS的WinRT应用程序，只需在应用程序运行时对其进行F5操作，您可以转到VisualStudio中的DOM资源管理器。如果您不将其视为选项卡，则转到调试| Windows | DOM资源管理器（如果您还没有看到JavaScript控制台，您也应该看看！）。现在，您可以点击“选择元素”按钮（靠近DOM资源管理器顶部），然后在应用程序中选择一个元素。
Jeff关于样式选择器的看法是正确的。不过，您不需要背景色属性。大纲：透明可以独立工作。我刚试过

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

您可以使用Firebug或类似工具访问该页面吗？这可能使您可以查看正在应用的样式。它不会打开浏览器。它在WinRT上运行。因此，它将自己添加到“开始”菜单（带有平铺的菜单）中，然后从那里运行它。所以没有办法使用Firebug。我也不知道有哪种类似Firebug的工具可以用来调试它。从这个角度来看，VS Express没有太大帮助。我已经更新了问题并添加了HTML和相应的CSS代码。虽然“outline”属性看起来很有希望，但不幸的是，即使我将其设置为“无”，它也没有删除边框。Jeff是对的，只是您不能将其设置为“无”，您必须使用透明。看到我的答案了。实际上，这在第二次尝试中起了作用（在我做了另一个小改动，最初覆盖了这个样式之后）。谢谢你的帮助@杰里米，把它设为“无”起作用了。但是，“大纲”属性的intellisense中没有显示“透明”。链接也没有设置任何悬停样式。我使用Blend来确认悬停确实发生在div上，而不是它包含的链接上。dom只显示用户与之交互的元素（例如：如果我单击按钮X，那么是的，它会突出显示添加到该按钮的属性），但如果悬停在某个元素上，不知何故，这一点没有被捕捉到，也没有突出显示。理论上，是的，你是对的，这就是它应该如何工作的。但事实并非如此：（突出显示是什么意思？我的意思是在左侧突出显示正在更改/添加的代码段。但这是因为元素的堆叠。在处理此类情况时，我倾向于将它们视为层（因为我主要是一名设计师，photoshop就像我的第三只手臂），我感兴趣的图层位于接收鼠标的图层下方（通过z索引），这导致调试器无法捕捉到向元素添加属性的js调用。这是我最好的猜测。我也见过普通html css出现这种情况，所以没什么大不了的。在这种情况下，最好的建议是：为您阅读MS docuThank。这对我来说非常有效。
#myList .win-container:hover { outline: none; }