asp.net - 将样式应用于 asp.net 中的菜单

Question

我曾尝试在菜单项上应用样式，但是当我将鼠标悬停在容器上时，尽管在容器上应用了悬停样式，但没有任何反应。仅当鼠标单击链接文本时才会发生操作。样式表:

    .staticItem:Hover
    {            
        background-color:#FFFF66;
        color:maroon;
        width:105px;
        width:100%;
        padding-left:5px;
        background-position:right;
        background-repeat:no-repeat;
        background-image:url('Images/Go_hover.png');
        box-shadow:2px 3px 3px rgba(61,00,00,.5) inset;     
        border:1px #610000 solid;
        padding-left:10px;
        padding-right:19px;
    }

    .staticItem
    {
        background-color:maroon;
        color:white;
        font-size:18px;
        font-family: "High Tower Text";
        font-weight:bold;
        padding-top:2px;
        padding-bottom:2px;
        padding-left:19px;
        padding-right:10px;
        width:100%;
        background-position:left;
        background-repeat:no-repeat;
        background-image:url('Images/Go.png');
        border:2px #610000 solid;
        cursor:pointer;
        border-radius:5px;
        box-shadow:3px 3px 10px rgba(61,00,00,.8);
    }

asp代码:

    <asp:Menu ID="Menu1" runat="server" CssClass="mainmenu" OnMenuItemClick="Menu1_MenuItemClick">
                    <StaticMenuItemStyle CssClass="staticItem" />
                    <Items>
                        <asp:MenuItem Text="Inbox" Value="Inbox" 
                            NavigateUrl="~/DataEntryOperator/Inbox.aspx">
                        </asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/DataEntryOperator/Outbox.aspx" Text="Outbox" 
                            Value="Outbox"></asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/DataEntryOperator/Compose.aspx" Text="Compose" 
                            Value="Compose"></asp:MenuItem>
                        <asp:MenuItem Text="Add Employee" Value="Add Employee"
                            NavigateUrl="~/DataEntryOperator/DEOAdd.aspx">
                        </asp:MenuItem>
                        <asp:MenuItem Text="Attendance" Value="Attendance" 
                            NavigateUrl="~/DataEntryOperator/Employee Attendance.aspx"></asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/DataEntryOperator/Employee Salary.aspx" 
                            Text="Salary Payment" Value="Salary Payment"></asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/DataEntryOperator/LeaveManager.aspx" Text="Leave Manager"
                            Value="Leave Manager"></asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/DataEntryOperator/Settings.aspx" Text="Settings" 
                            Value="Settings"></asp:MenuItem>
                        <asp:MenuItem Text="Logout" Value="Logout"></asp:MenuItem>
                    </Items>
                </asp:Menu>

我希望这张图片能解决问题。

[悬停在容器内部但文本外部时]

[悬停在容器内部但文本外部时]

[悬停在文本内时]

Answer 1

对于切换样式，您应该设置菜单的StaticHoverStyle。例如:

<StaticMenuItemStyle CssClass="menuitem" HorizontalPadding="10px" ForeColor="Blue" />
<StaticHoverStyle CssClass="menuitemhover" ForeColor="White" BackColor="#4E7DD1" />
<StaticSelectedStyle CssClass="menuitemselect" ForeColor="White" BackColor="#4E7DD1" />