Question

我的问题：如何使用我的ASP.net菜单创建悬停效果。 问题是，由于标准ASP.net菜单没有on on hover功能，因此很难/不可能（？）创建。

完成我的作业后，我看到一些人用css，jquery和其他方法尝试过...但我更喜欢'普通'html或css 而没有非常复杂的解决方案。如果这真的不可能，有没有明确的方法如何使用它？

大多数css选项都失败了，或者非常复杂。

究竟应该发生什么：菜单项例如

<asp:MenuItem NavigateUrl="~/Pages/Test.aspx" Text="Test" Value="Test" Selectable="true"></asp:MenuItem>

由于悬停效应，应该获得不同的背景。

也许将C＃代码中的CSS更改为其他内容？

感谢您的回答！

〜解决〜 非常感谢您的帮助！两个答案都解决了这个问题。我尝试使用该菜单，当我注意到在这个菜单中，悬停效果也没有用。出了什么问题？我使用2个css文件。并且因为第一个css文件包含一些关于如何处理a：hover的指令，所有其他悬停效果都被忽略了。

现在我知道为什么悬停效果不起作用，我可以解决这个问题。非常感谢你们！

Answer 1

好吧，我花了很长时间才弄清楚如何使用ASP.net菜单创建悬停效果。所以，我找到了一种简单的方法，没有所有硬件或大量代码。

如果您在浏览器中查看自己的asp页面，请转到页面来源。当您查看菜单时，您会发现它看起来像这样：

<li>
    <a class="level1" href="Home.aspx">
    <img src="../Images/home.png" alt="" title="" class="icon" />Home</a></li>
<li>
    <a class="level1" href="Page2.aspx">
    <img src="../Images/homehover.png" alt="" title="" class="icon" />Page2</a><ul class="level2">

解决方案是改变你的css：

a:hover[href*="Home"][class*="level1"]
{
     color: black;
}

这条CSS选择A元素，其中（在HTML中）属性href和类包含（或等于）Home和level1。

如果你有一个比我更复杂的菜单可能有点不同，因为我只有2个级别。（菜单和子菜单）希望它可以帮助你们！

然后这是我在stackoverflow上的第一个问题/答案的结束。谢谢你的帮助！

ps：如果它不起作用，请将所有相关css文件中的所有a：hover语句删除到包含该菜单的页面。如果您使用StaticHoverStyle / DynamicHoverStyle，也可能是一个问题。

使用我的ASP.net菜单控件创建一个悬停效果

1 个答案: