locked
how to disable the hightlighting when mouse hove over the listview item? RRS feed

  • Question

  • I have a list veiw and each item in the listview only shows 70% size so that they can seperate each other well. However, when I move mouse above the item and hove over it, the whole item will be hightlighed with some default backgroud and I don't like that. How do I disable the hightlighting?  
    shang xinli
    Friday, December 30, 2011 12:07 AM

Answers

  • Hi Shang Xinli,
    The DOM Explorer is your friend...
    Create a Spitview Application and run in the debugger.
    Show the DOM Explorer (Debug, Windows, DOM Explorer).
    Click on the 'Select element' text and highlight and select the first item in the list view.  Make sure it is the outermost div.  If you have a dual screen system you will see the class name (otherwise alt-tab over to the debugger-don't move the mouse.).
    You will see the class="win-template win-item win-hover"
    Here is the tricky part, as soon as you move the mouse the class will change.  But you can outsmart this by manually typing the name.  Double click on the text inside the "" and change it to "win-template win-item win-hover".  Then click on div to apply your change. Now you can explore the styles.
    Notice in the right pane the 'Styles' tab shows the background-color as  rgba(255, 255, 255, 0.24).  Look and see that this comes from the .win-listView .win-hover.win-item style.  You can search for this style (it is in ui-dark.css) and a little backwards:.win-listView .win-item.win-hover.
    You can override the background color by putting it in your CSS file (splitview.css) and changing it:
     
    .win-listView .win-item.win-hover
    {
        background-color: rgba(255, 255, 255, 0);
    }
    

    Or you can just target a specific listview in the spitpage by using a classname and css selectors!
    -Jeff
     

    Jeff Sanders (MSFT)
    Friday, December 30, 2011 3:07 PM
    Moderator

All replies

  • Hi Shang Xinli,
    The DOM Explorer is your friend...
    Create a Spitview Application and run in the debugger.
    Show the DOM Explorer (Debug, Windows, DOM Explorer).
    Click on the 'Select element' text and highlight and select the first item in the list view.  Make sure it is the outermost div.  If you have a dual screen system you will see the class name (otherwise alt-tab over to the debugger-don't move the mouse.).
    You will see the class="win-template win-item win-hover"
    Here is the tricky part, as soon as you move the mouse the class will change.  But you can outsmart this by manually typing the name.  Double click on the text inside the "" and change it to "win-template win-item win-hover".  Then click on div to apply your change. Now you can explore the styles.
    Notice in the right pane the 'Styles' tab shows the background-color as  rgba(255, 255, 255, 0.24).  Look and see that this comes from the .win-listView .win-hover.win-item style.  You can search for this style (it is in ui-dark.css) and a little backwards:.win-listView .win-item.win-hover.
    You can override the background color by putting it in your CSS file (splitview.css) and changing it:
     
    .win-listView .win-item.win-hover
    {
        background-color: rgba(255, 255, 255, 0);
    }
    

    Or you can just target a specific listview in the spitpage by using a classname and css selectors!
    -Jeff
     

    Jeff Sanders (MSFT)
    Friday, December 30, 2011 3:07 PM
    Moderator
  • Great!


    Great Wall
    Friday, December 30, 2011 10:09 PM