2016-07-21 5 views
1

Ich entwickle eine Windows Universal App mit WinJS, aber um sie anzupassen, ist es ziemlich schwierig und ich muss einige Design-Anweisungen befolgen.Wie Hover-Eigenschaften von WinJS ListView entfernen?

Das Problem tritt auf, wenn ich versuche, die Hover-Eigenschaft aus dem Listenelement zu entfernen. Wenn sich meine Maus über dem Gegenstand befindet, erhält das Div einen dunkleren Hintergrund. Ich versuchte es mit

.win-listview .win-container:hover{ 
    background-color: transparent; 
} 

und auch mit

.win-selectionbackground { 
    opacity: 0; 
} 

zu entfernen, aber es funktioniert nicht. Hier

ist ein Code zu helfen:

<!-- TEMPLATES --> 
<div class="storyPhotoTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> 
    <div class="story-photo-icons"> 
     <div style="height: 250px; width: 22px;position:relative; float: left;"> 
      <img class='xButton smaller' src = '../../images/x-icon.png' /> 
     </div> 
     <div class="pic-area"> 
      <img src="#" class="story-photo" data-win-bind="src: image" /> 
     </div> 

    </div> 
</div> 

<section class="gallery"> 
    <div class="button lBtn"></div> 
    <!-- CONTENT --> 
    <div id="storyPhotoGrid" 
     class="win-selectionstylefilled" 
     data-win-control="WinJS.UI.ListView" 
     data-win-options="{ 
      itemDataSource: Photos.StoryGrid.dataSource, 
      itemTemplate: select('.storyPhotoTemplate'), 
      selectionMode: 'none', 
      tapBehavior: 'none', 
      layout: { type: WinJS.UI.GridLayout, orientation:'horizontal' } 
    }"> 
    </div> 

Der DOM-Baum durch den Rahmen konstruiert ist nicht offensichtlich. Wenn jemand mehr Informationen benötigt, sag es mir einfach und ich aktualisiere die Frage.

Antwort

1

Die Hover-Verhalten für Listview-Element wird in

html.win-hoverable .win-selectionstylefilled .win-container:hover .win-itembox, 
html.win-hoverable .win-selectionstylefilled.win-container:hover .win-itembox 
{ 
    background-color: rgba(255, 255, 255, 0.1); 
} 

Sie definiert diese in ui-light.css oder ui-dark.css Dateien von WinJS lib finden kann, je nachdem, welches Thema Sie verwenden.

Also, wenn Sie die Hintergrundfarbe auf schweben deaktivieren möchten, ändern Sie die Art wie unten:

html.win-hoverable .win-selectionstylefilled .win-container:hover .win-itembox, 
html.win-hoverable .win-selectionstylefilled.win-container:hover .win-itembox 
{ 
    background-color:transparent; 
} 
+0

Thank you very much! Ich möchte hinzufügen, dass ich es in einer anderen Datei gemacht habe, so dass ich die WinJS-Dateien so erhalten konnte, wie sie sind, und überschreiben sie mit einer benutzerdefinierten CSS-Datei, die nach ihnen geladen wurde. –

Verwandte Themen