我曾尝试在菜单项上应用样式,但是当我将鼠标悬停在容器上时,尽管在容器上应用了悬停样式,但什么也没有发生。仅当鼠标单击链接文本时才会发生操作。样式表:
.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>
我希望这张图片能解决这个问题。
[当悬停在容器内但在文本之外时]
[当悬停在容器内但在文本之外时]
[悬停在文本内时]