This is a migrated thread and some comments may be shown as answers.

Hover problems

2 Answers 51 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Johnny
Top achievements
Rank 1
Johnny asked on 18 Aug 2010, 11:41 AM
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 Answers, 1 is accepted

Sort by
0
Accepted
Yana
Telerik team
answered on 23 Aug 2010, 10:16 AM
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
0
Johnny
Top achievements
Rank 1
answered on 23 Aug 2010, 12:22 PM
Hello Yana,

Yeah altering the background positioning did the trick.

Thanks
Johnny
Tags
PanelBar
Asked by
Johnny
Top achievements
Rank 1
Answers by
Yana
Telerik team
Johnny
Top achievements
Rank 1
Share this question
or