gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 07:05:28 24 4
gpt4 key购买 nike

我正在构建一个 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;
}

有什么想法吗?

最佳答案

Jeff 关于样式选择器的说法是正确的。不过,您不需要 background-color 属性。大纲:透明独立运作。我刚刚试过了。

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

关于css - 在 Windows 8 Metro 风格应用程序中删除 div 周围的灰色边框(悬停时),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12591109/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com