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

Question

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

完成我的作业后，我看到一些人尝试使用 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 和 class 包含（或等于）Home 和 level1。

如果你有一个比我更复杂的菜单可能会有点不同，因为我只有 2 层深。 （菜单和子菜单） 希望对大家有帮助！

那么这是我关于stackoverflow的第一个问题/答案的结尾。 感谢您的帮助！

ps：如果不起作用，请将所有相关css文件中的所有a：hover语句删除到带有菜单的页面。如果您使用 StaticHoverStyle/DynamicHoverStyle，也可能会出现问题。