Question

菜单项不会显示带有以下代码的悬停图像选项。我相信我已经正确地完成了CSS。建议？

<asp:Menu ID="mnuMain" EnableViewState="false" IncludeStyleBlock="true" Orientation="Horizontal" runat="server">
    <DynamicSelectedStyle CssClass="staticmenu" />
    <StaticSelectedStyle CssClass="staticmenu" />
    <StaticHoverStyle CssClass="staticmenu_hover" />
    <DynamicHoverStyle CssClass="staticmenu_hover" />
    <StaticMenuItemStyle HorizontalPadding="20px" />
    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" ImageUrl="~/i/nest.jpg" Selected="true" />
        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" ImageUrl="~/i/nest.jpg" />
    </Items>
</asp:Menu>


.staticmenu
{

}

.staticmenu_hover
{
    background-image:url('/i/bird_popup.gif');
}

Answer 1

我不确定ASP如何将ImageUrl参数添加到元素中。但如果它使用内联样式，那么它将始终覆盖您的外部CSS，如果它是img元素，那么您的background-image样式将没有明显效果。

我建议在CSS中将两个图像都包含为background-image个样式，并且可能使用纯CSS来管理图像状态，所以看起来更像是这样：

.staticmenu
{
   background-image:url('/i/nest.jpg');
}

.staticmenu:hover
{
    background-image:url('/i/bird_popup.gif');
}

另请注意，CSS中的图片网址将相对于样式表的位置，而不是文档的位置（除非base中指定了head标记。）

menuitem不显示悬停图像

1 个答案: