Because an A element encloses all the other elements, you may use a dynamic pseudo class selector, :hover, to address the hover look of the panel item states.
Here is how the selectors for the hover variant of the three states look:
| |
 Copy Code |
|
.RadPanelBar_MyWinXP li a:hover
.RadPanelBar_MyWinXP li a:hover .wrap
.RadPanelBar_MyWinXP li a:hover .innerWrap
.RadPanelBar_MyWinXP li a.selected:hover
.RadPanelBar_MyWinXP li a.selected:hover .wrap
.RadPanelBar_MyWinXP li a.selected:hover .innerWrap
.RadPanelBar_MyWinXP li a.disabled:hover
.RadPanelBar_MyWinXP li a.disabled:hover .wrap
.RadPanelBar_MyWinXP li a.disabled:hover .innerWrap |
Example
Suppose that we define the following classes and set the FocusedCssClass for a panel item:
| |
Copy Code |
|
<head runat="server">
<style type="text/css">
.customFocused
{
background-color:Red;
border:1px solid #002D96;
padding:2px 4px;
}
.RadPanelBar_Outlook .rootGroup li .customFocused:hover
{
background-color:yellow;
border:1px solid red;
color:red;
}
</style>
</head>
...
<rad:RadPanelBar id="RadPanelBar1" runat="server" skin="Outlook">
<Items>
<rad:RadPanelItem runat="server" Text="This" AccessKey="H" FocusedCssClass="customFocused"></radM:RadPanelItem>
<rad:RadPanelItem runat="server" Text="Root RadPanelItem">
<Items>
...
</rad:RadPanelBar> |