2

Windows 8 の Metro スタイル アプリを作成していて、すぐに使用できるものとは少し異なるタイルのスタイルを設定したいと考えています。ユーザーがタイル (div) にカーソルを合わせると、その周りに灰色のボックスが表示されます。これがスクリーンショットです。

タイルの周りに灰色の境界線がある Windows 8 アプリのスクリーンショット

ただし、コード内のこれらの灰色の境界線に関連付けられた 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;
}

何か案は？

4

4 に答える 4

5

ジェフはスタイル セレクターについて正しかった。ただし、background-color プロパティは必要ありません。概要: 透過は単独で機能します。試してみました。

#myList .win-container:hover {
    outline: none;
}
于 2012-09-26T01:04:33.107 に答える
3

リストビューでレンダリングしていると仮定します。

次のスタイルをCSSに追加します...

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

ListViewを使用していない場合は、スクリーンショットの作成に使用しているHTMLを投稿してください。

于 2012-09-25T21:29:50.503 に答える
0

HTML/CSS/JS を使用する WinRT アプリをデバッグするには、アプリを F5 キーで押し、実行中に Visual Studio の DOM Explorer に移動します。タブとして表示されない場合は、[デバッグ] | [デバッグ] に移動します。窓 | DOM Explorer (JavaScript コンソールをまだ見ていない場合は、こちらも参照してください)。これで、[要素の選択] ボタン (DOM Explorer の上部近く) をクリックして、アプリ内の要素を選択できるようになりました。

于 2012-09-25T23:50:26.913 に答える
0

ホバー スタイルは、その要素の div ではなく、リンクとおそらくクラスに関連付けられている可能性があります。

KRyan が提案したように、デバッガーを使用してターゲットにしている要素を見つけます。それ以外の場合は、CSS ファイル内のaまたはその他のhover要素の一部を変更してみて、正しいものが見つかるまで試行錯誤してください。

于 2012-09-25T21:30:50.503 に答える