Question

我正在尝试将用户控件放在一起，其中包含一个菜单控件。我所拥有的是一个水平方向的菜单，并使用4个GIF作为单独的菜单项，它们之间的间距约为10px。到目前为止很容易，但我需要的是在悬停时换出每个gif。我很确定菜单控件不支持图像交换悬停功能，所以我试图找到一个解决方法。我猜它会涉及一些聪明的CSS，但我完全卡住，根本无法搞清楚这一点。有什么帮助吗？

这里的问题：我被要求将菜单放在用户控件中，然后在母版页中注册它。这有什么好处？为什么不将菜单编码到母版页而不是单独的用户控件？

谢谢......

Answer 1

我建议使用两种CSS样式。在您的第一个样式上，您可以为非悬停状态设置背景图像。在第二种样式上，您将使用背景图像作为悬停状态。然后，您可以使用MenuItemStyles和HoverMenuItemStyles。这是一些快速示例代码：

menuItem {background-image：url（'menuItemImg.gif'）;背景位置：左中心; background-repeat：no-repeat; } hoverItem {background-image：url（'hoverItemImg.gif'）;背景位置：左中心; background-repeat：no-repeat; }

...

<asp:Menu ID="menu1" runat="server" StaticMenuItemStyle-CssClass="menuItem" StaticHoverStyle-CssClass="hoverItem">
    <Items>
      ...
    </Items>
</asp:Menu>

如果您正在使用动态项目，则可能需要切换到DynamicMenuItemStyle等。

Answer 2

你可以做的是将提到的编码大猩猩方法与CSS Sprites结合起来。我之所以这么说是因为如果您只是在用户将鼠标悬停在菜单项上时更换图像，则必须等待第二张图像加载，这样它才能顺利转换。使用CSS Sprites Technique，您可以加载包含非悬停状态和悬停状态的图像，只需更改图像的位置，即可获得更加流畅的体验。

帮助在Asp.Net中设置菜单控件的样式

2 个答案: