Hover problems

[Johnny]

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;
}

[Yana]

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

[Johnny]

Hello Yana,

Yeah altering the background positioning did the trick.

Thanks
Johnny