Remove hover style on menu

6 posts, 0 answers
  1. Patrick
    Patrick avatar
    20 posts
    Member since:
    Aug 2013

    Posted 28 Jul 2015 Link to this post

    Using the MVC menu I cant get rid of the text color style on hover.  It seems something is firing on JQuery when the item is hovered.  Its appending k-state-hover, which is setting the color property somewhere in the kendo style sheets.

    I've tried to get rid of if using

     

    #topmenu li .k-state-hover         

    {         

    color: #fdfdfd;   

        }​

    or

    #topmenu .k-state-hover         
    {         
    color: #fdfdfd;   
        }​​

    with no luck.  Any ideas?
  2. Patrick
    Patrick avatar
    20 posts
    Member since:
    Aug 2013

    Posted 28 Jul 2015 Link to this post

    Found it

     

    #topmenu .k-link        {        color: #fdfdfd;      }​

  3. Eyup
    Admin
    Eyup avatar
    3296 posts

    Posted 30 Jul 2015 Link to this post

    Hello Patrick,

    Thank you for sharing your specific solution with our community.
    Please feel free to turn to us if new questions arise.

    Regards,
    Eyup
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. Yngve
    Yngve avatar
    18 posts
    Member since:
    Feb 2017

    Posted 05 May Link to this post

    Is there a way to just get rid off all the hover styling? It's really cumbersome to go through all the hover effects that are happening and override them with my own hover effects. I've been sitting for a whole day now doing something I feel shouldn't really be neccessary.  
  5. Eyup
    Admin
    Eyup avatar
    3296 posts

    Posted 08 May Link to this post

    Hello Yngve,

    Although there is no dedicated property to achieve this requirement, you can use CSS:
    <style>
      .k-menu .k-state-hover,
      .k-menu .k-state-border-down,
      .k-menu .k-state-hover .k-link
      {
        background-color: transparent !important;
        background-image: none !important;
        color: #515967 !important;
      }
    </style>

    You can also check the sample here:
    http://dojo.telerik.com/uLuXu/7

    You can also check these resources for general customization info:
    http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling
    http://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes

    I hope this will prove helpful.

    Regards,
    Eyup
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Yngve
    Yngve avatar
    18 posts
    Member since:
    Feb 2017

    Posted 09 May in reply to Eyup Link to this post

    Thank you!
Back to Top