Removing grey border around divs (on hover) in Windows 8 Metro style app

2
votes

I'm building a Windows 8 Metro style app and I'd like to style the tiles a little different than what's available out of the box. When the user hovers over a tile (div), a grey box appears around it. Here's a screenshot.

Screenshot of Windows 8 app with grey border around a tile

But there are no CSS styles associated with these grey borders in the code.

I tried overriding it anyway using the following code. But it didn't work.

div:hover {
  border: none;
}

[Added in response to comments] Here's the 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>

Here's the CSS.

div.category:hover {
    width: 180px; 
    height: 50px;
    background-color:#f6f4d3;
    text-align:center;
    padding-top:25px;
    color: #f6f4d3;
    outline:none;
    border:none;
}

Any ideas?

4
csswindows-8windows-runtime
Can you access the page with Firebug or similar? That could allow you to see the styles that are being applied. - KRyan
It doesn't open up the browser. It runs on WinRT. So it adds itself to the start menu (the one with the tiles) and you run it from there. So no way to use Firebug. I don't know of a Firebug like tool to use to debug this either. VS Express isn't very helpful from this perspective. - Girish

4 Answers

3
votes

I'm assuming you are rendering things in a list view.

Add the following style to your css...

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

If you are not using a ListView, please post the HTML you are using to create the screen shot.

5
votes

Jeff was right about the style selector. You don't need the background-color property, though. The outline: transparent works on its own. I just tried it.

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

The hover styling may likely be associated with a link and possibly a class rather than div for that element.

As KRyan suggested, use a debugger to find out which element you are targeting, else try to change some of the a or other hover elements in the CSS file, trial and error until you find the right one.

0
votes

To debug a WinRT app that uses HTML/CSS/JS, you just F5 your app and while it's running, you go to the DOM Explorer in Visual Studio. If you don't see it as a tab, then go to Debug | Windows | DOM Explorer (if you haven't seen the JavaScript Console, you should look at that too!). Now you can hit the Select Element button (near the top of the DOM Explorer) and then select an element in the app.