在Windows 8 Metro风格应用中删除div周围的灰色边框(悬停时)
Gir*_*ish 2 css windows-8 windows-runtime
我正在构建一个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.
div.category:hover {
width: 180px;
height: 50px;
background-color:#f6f4d3;
text-align:center;
padding-top:25px;
color: #f6f4d3;
outline:none;
border:none;
}
有任何想法吗？
杰夫对风格选择器是正确的.但是,您不需要background-color属性.大纲:透明的作品本身.我刚尝试过.
#myList .win-container:hover {
outline: none;
}