locked
Turn off hover RRS feed

  • Question

  • Hi all

    Another quick question, anyone know the CSS style to turn off the hover on this pls?

    Cheers

    RIchard 

    Thursday, May 3, 2012 10:53 AM

Answers

  • Hi RCHarris,

    In order to turn the off the hover effect on the documents/items in the library/list, try the following css styles in your custom css file:

    tr.s4-itm-hover,tr.ms-itmhover:hover,tr.ms-ppanerow:hover > td,tr.ms-ppanerowalt:hover > td
    {
            background:none !important;
            cursor:pointer;
    }
    tr:hover .s4-ctx-show, tr .s4-ctx-show:hover
    {
            /* [Replace the color '#ffffff' (White) color with the color of your choice/theme] */
            background-color:#ffffff !important;
    }

    This should do the trick for you.

    Regards,
    Devang Bhavsar

    Thursday, May 3, 2012 8:18 PM

All replies

  • It's not a matter of turning off hover, but setting your hover the same as the a:link.  Find the normal CSS for the link that you want to change and set the hover properties the same.


    Heather Waterman SharePoint Desginer www.heatherwaterman.com

    Thursday, May 3, 2012 11:21 AM
  • Even for the box that is grey?
    Thursday, May 3, 2012 11:40 AM
  • The below classes are applied for the hover.

    tr.ms-viewheadertr > th.ms-vh:hover, tr.ms-viewheadertr > th.ms-vh2:hover  in corev4.css

    in your custom css mention the classes and make the background:none to achieve the above requirement.

    Hope this will help you.

    Regards

    Mahesh


    Mahesh Reddy

    Thursday, May 3, 2012 11:43 AM
  • Added the below to the custom css

    .tr.ms-viewheadertr {

    background: none;
    }
    .th.ms-vh:hover {
    background: none;
    }
    .tr.ms-viewheadertr {
    background: none;
    }
    .th.ms-vh2:hover  {
    background: none;
    }

    no luck :(

    Thursday, May 3, 2012 12:39 PM
  • Hi Rh91uk,

    You should override the ootb css classes without altering the hierarchy. It is also recommended to use !important property besides your rules. Try the following css styles in your custom css file:

    tr.ms-viewheadertr > th.ms-vh:hover,tr.ms-viewheadertr > th.ms-vh2:hover
    {
            background:none !important;
            border:none !important;
    }
    tr.ms-viewheadertr > th:hover .s4-ctx-show
    {
           background:none !important;
           border:none !important;
    }

    Also, make sure that you use apply '!important' property besides your rules as shown above. 

    PS : The declaration !important is used in cascading style sheets to give priority.

    Hope this helps.

    Best Regards,
    Devang Bhavsar

    • Edited by Devang Bhavsar Thursday, May 3, 2012 5:16 PM Added tabbing for readability
    • Marked as answer by R C Harris Thursday, May 3, 2012 6:25 PM
    • Unmarked as answer by Kris Wagner - MVP Monday, May 14, 2012 9:13 PM
    Thursday, May 3, 2012 5:03 PM
  • That's brilliant, that's helped thanks. So, now that has worked, how do I turn off the hover below on the rest of the list?

    Thanks again :)

    Thursday, May 3, 2012 6:25 PM
  • Hi RCHarris,

    In order to turn the off the hover effect on the documents/items in the library/list, try the following css styles in your custom css file:

    tr.s4-itm-hover,tr.ms-itmhover:hover,tr.ms-ppanerow:hover > td,tr.ms-ppanerowalt:hover > td
    {
            background:none !important;
            cursor:pointer;
    }
    tr:hover .s4-ctx-show, tr .s4-ctx-show:hover
    {
            /* [Replace the color '#ffffff' (White) color with the color of your choice/theme] */
            background-color:#ffffff !important;
    }

    This should do the trick for you.

    Regards,
    Devang Bhavsar

    Thursday, May 3, 2012 8:18 PM
  • Thank you Devang :)
    Friday, May 4, 2012 6:49 AM