小编Gir*_*ish的帖子

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

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

Windows 8应用程序的屏幕截图,在瓷砖周围有灰色边框

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

无论如何,我尝试使用以下代码覆盖它.但它没有用.

div:hover {
  border: none;
}

Run Code Online (Sandbox Code Playgroud)

[为回应评论而添加]这是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> …

Run Code Online (Sandbox Code Playgroud)

css windows-8 windows-runtime

Gir*_*ish

2012 09-26

2
推荐指数

1
解决办法

4212
查看次数