Hover problems

3 posts, 1 answers
  1. Johnny
    Johnny avatar
    16 posts
    Member since:
    Mar 2009

    Posted 18 Aug 2010 Link to this post

    Hi Team,

    I have some problem showing a background image in the :hover state. I´ve tried to sort it out by using firebug but I can´t see what I´m doing wrong. Instead of showing background image it shows a background color that I have not set in my css.
    Css
    .RadPanelBar_UnigolfBlack
    {
        background: #4f4f4f;
        width:100% !important;
    }
      
    .RadPanelBar_UnigolfBlack .rpRootGroup
    {
        border-color: #080808;
    }
      
    .RadPanelBar_UnigolfBlack .rpLink,
    .RadPanelBar_UnigolfBlack .rpTemplate
    {
        color: #fff;
        font: bold 12px/24px "Segoe UI", Arial, sans-serif;
    }
      
    .RadPanelBar_UnigolfBlack .rpLink
    {
        background-image: url('PanelBar/SideBarSubMenuItem.png');
        height: 46px;
        background-repeat: no-repeat;
        border-color: #4f4f4f;
    }
    .RadPanelBar_UnigolfBlack .rpLink .rpText
    {
        padding: 10px 0px 0px 20px;
        margin:0px;
    }
      
    .RadPanelBar_UnigolfBlack .rpLink:hover
    {
        color: #909a0e;
        background-image: url('PanelBar/SideBarSubMenuItemHover.png')!important;
        height: 46px;
        background-repeat: no-repeat;
    }
      
    .RadPanelBar_UnigolfBlack .rpFocused,
    .RadPanelBar_UnigolfBlack .rpExpanded,
    .RadPanelBar_UnigolfBlack .rpSelected,
    .RadPanelBar_UnigolfBlack .rpSelected:hover
    {
        background-color: #2d2d2d;
        border-color: #000;
    }
      
    .RadPanelBar_UnigolfBlack .rpOut
    {
        border-color: #000;
    }
      
    /* <disabled items> */
    .RadPanelBar_UnigolfBlack .rpDisabled,
    .RadPanelBar_UnigolfBlack .rpDisabled:hover
    {
        color: #777;
    }
    /* </disabled items> */
      
    /* <expand arrows> */
    .RadPanelBar_UnigolfBlack .rpExpandable .rpText,
    .RadPanelBar_UnigolfBlack .rpExpanded .rpText
    {
        background-color: transparent;
        background-image: url('PanelBar/Expandable.png');
    }
    /* </expand arrows> */
      
    /* <subitems> */
    .RadPanelBar_UnigolfBlack .rpGroup
    {
        background-color: #4f4f4f;
    }
      
    .RadPanelBar_UnigolfBlack .rpGroup .rpLink,
    .RadPanelBar_UnigolfBlack .rpGroup .rpTemplate
    {
        color: #a9a9a9;
        background-image: none;
        background-color: transparent;
    }
      
    .RadPanelBar_UnigolfBlack .rpGroup .rpLink:hover
    {
        color: #9eda29;
    }
      
    .RadPanelBar_UnigolfBlack .rpGroup .rpLink,
    .RadPanelBar_UnigolfBlack .rpGroup .rpLink .rpOut
    {       
        background-color: transparent;
        background-image: url('PanelBar/SubItemStates.png');
        background-repeat: no-repeat;
    }
      
    .RadPanelBar_UnigolfBlack .rpGroup .rpSelected,
    .RadPanelBar_UnigolfBlack .rpGroup .rpSelected:hover
    {
        color: #fff;
    }
      
    /* <subitems (disabled)> */
    .RadPanelBar_UnigolfBlack .rpGroup .rpDisabled,
    .RadPanelBar_UnigolfBlack .rpGroup .rpDisabled:hover,
    .RadPanelBar_UnigolfBlack .rpGroup .rpDisabled .rpOut
    {
        background-image: none;
    }
      
    .RadPanelBar_UnigolfBlack .rpGroup .rpDisabled,
    .RadPanelBar_UnigolfBlack .rpGroup .rpDisabled:hover
    {
        color: #777;
    }
    /* <subitems (disabled)> */
      
    /* </subitems> */
      
      
    /* <background positioning> */
    .RadPanelBar_UnigolfBlack .rpLink,
    .RadPanelBar_UnigolfBlack .rpExpanded
    {
        background-position: 0 0;
    }
      
    .RadPanelBar_UnigolfBlack .rpFocused,
    .RadPanelBar_UnigolfBlack .rpLink:hover,
    .RadPanelBar_UnigolfBlack .rpExpanded:hover
    {
        background-position: 0 -200px;
    }
      
    .RadPanelBar_UnigolfBlack .rpSelected,
    .RadPanelBar_UnigolfBlack .rpSelected:hover
    {
        background-position: 0 -400px;
    }
      
    .RadPanelBar_UnigolfBlack .rpFirst .rpLink,
    .RadPanelBar_UnigolfBlack .rpFirst .rpExpanded
    {
        background-position: 0 -1px;
    }
      
    .RadPanelBar_UnigolfBlack .rpFirst .rpFocused,
    .RadPanelBar_UnigolfBlack .rpFirst .rpLink:hover
    {
        background-position: 0 -201px;
    }
      
    .RadPanelBar_UnigolfBlack .rpFirst .rpSelected,
    .RadPanelBar_UnigolfBlack .rpFirst .rpSelected:hover
    {
        background-position: 0 -401px;
    }
      
    /* <root items (disabled)> */
    .RadPanelBar_UnigolfBlack .rpDisabled:hover
    {
        cursor: default;
    }
      
    .RadPanelBar_UnigolfBlack .rpDisabled,
    .RadPanelBar_UnigolfBlack .rpDisabled:hover,
    .RadPanelBar_UnigolfBlack .rpDisabled:hover .rpOut
    {
        background-position: 0 0;
    }
    /* </root items (disabled)> */
      
    /*      <expand arrows> */
    .RadPanelBar_UnigolfBlack .rpExpandable .rpText,
    .RadPanelBar_UnigolfBlack .rpExpanded .rpText
    {
        padding-right: 20px;
        background-repeat: no-repeat;
    }
      
    .RadPanelBar_UnigolfBlack_rtl .rpExpandable .rpText,
    .RadPanelBar_UnigolfBlack_rtl .rpExpanded .rpText
    {
        padding-left: 20px;
    }
      
    .RadPanelBar_UnigolfBlack_rtl .rpGroup .rpText
    {
        padding: 0 10px;
    }
      
    .RadPanelBar_UnigolfBlack .rpExpandable .rpText { background-position: 100% 0; }
    .RadPanelBar_UnigolfBlack .rpExpanded .rpText { background-position: 100% -176px; }
    .RadPanelBar_UnigolfBlack_rtl .rpExpandable .rpText { background-position: 6px 0; }
    .RadPanelBar_UnigolfBlack_rtl .rpExpanded .rpText { background-position: 6px -176px; }
      
    /*      </expand arrows> */
      
    .RadPanelBar_UnigolfBlack .rpGroup .rpLink,
    .RadPanelBar_UnigolfBlack .rpGroup .rpLink .rpOut { background-position: 0 200px; }
      
    .RadPanelBar_UnigolfBlack .rpGroup .rpLink:hover,
    .RadPanelBar_UnigolfBlack .rpGroup .rpFocused { background-position: 100% -22px; }
    .RadPanelBar_UnigolfBlack .rpGroup .rpLink:hover .rpOut,
    .RadPanelBar_UnigolfBlack .rpGroup .rpFocused .rpOut { background-position: 0 0; }
      
    /*      <subitems (selected)> */
    .RadPanelBar_UnigolfBlack .rpGroup .rpSelected,
    .RadPanelBar_UnigolfBlack .rpGroup .rpSelected:hover { background-position: 100% -222px; background-color: transparent; }
    .RadPanelBar_UnigolfBlack .rpGroup .rpSelected .rpOut,
    .RadPanelBar_UnigolfBlack .rpGroup .rpSelected:hover .rpOut { background-position: 0 -200px; }
    /*      </subitems (selected)> */
      
    /*      <subitems (expand arrows)> */
    .RadPanelBar_UnigolfBlack .rpGroup .rpExpandable .rpText,
    .RadPanelBar_UnigolfBlack .rpGroup .rpExpandable:hover .rpText { background-position: 100% -938px; }
    .RadPanelBar_UnigolfBlack .rpGroup .rpExpanded .rpText,
    .RadPanelBar_UnigolfBlack .rpGroup .rpExpanded:hover .rpText { background-position: 100% -1078px; }
    .RadPanelBar_UnigolfBlack_rtl .rpGroup .rpExpandable .rpText,
    .RadPanelBar_UnigolfBlack_rtl .rpGroup .rpExpandable:hover .rpText { background-position: 6px -938px; }
    .RadPanelBar_UnigolfBlack_rtl .rpGroup .rpExpanded .rpText,
    .RadPanelBar_UnigolfBlack_rtl .rpGroup .rpExpanded:hover .rpText { background-position: 6px -1078px; }
    /*      </subitems (expand arrows)> */
    /* </background positioning> */
      
     DIV.RadPanelBar_UnigolfBlack .rpRootGroup .rpLink {
      
        FONT-WEIGHT: bold;
      
    }
      
     DIV.RadPanelBar_UnigolfBlack .rpRootGroup .rpLink:hover {
      
        COLOR: #909A0E;
        font-weight:bold;
        background-image: url('PanelBar/SideBarSubMenuItemHover.png')!important;
        height: 46px;
        background-repeat: no-repeat;
    }
  2. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 23 Aug 2010 Link to this post

    Hi Johnny,

    I see in the css that you've set background-color for focused, expanded and selected state so I guess that their style is applied. Also please set background-position to the rpLink:hover class to overwrite the default one.

    If this doesn't help, could you please send us a live url where we can observe the problem? Thanks

    Kind regards,
    Yana
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Johnny
    Johnny avatar
    16 posts
    Member since:
    Mar 2009

    Posted 23 Aug 2010 Link to this post

    Hello Yana,

    Yeah altering the background positioning did the trick.

    Thanks
    Johnny
Back to Top