Asp.NET 4.0菜单控件a：释放鼠标后保持活动样式

我正在asp.net 4.0 web应用程序中使用标准asp.net菜单。为了澄清这一点，它是一个标准的web应用程序，而不是任何可用的MVC应用程序版本

这就是我面临的问题

这真的是一个相当简单的设置。我的css覆盖了菜单的各种状态，：link，：visted，：hover和：active

正如您所怀疑的，这些状态之间存在明显的差异。此外，我运行了一些javascript，突出显示了当前页面的链接，这是另一个相当正常的活动。到目前为止，还没有什么神秘或不可预测的

当人们开始点击菜单时，问题就来了。假设你在主页上。第一个菜单项高亮显示。现在让我们说——无论出于何种原因，只有用户才能想出——您可以单击并拖动其中一个菜单项。它不需要太远，可能只有一两毫米。预期的行为是，拖动将取消单击，页面将停留在原来的位置，单击拖动菜单项将返回到以前的状态

实际发生的情况是，拖动使单击无效，页面停留在原来的位置，单击拖动菜单项似乎保留：活动样式（如果存在），或者：悬停样式（如果不存在）：活动样式）

复制：

这可能是Asp.Net菜单中的一个错误

为了尝试在我的项目之外复制这个问题，我使用VS2010中的模板创建了一个bog标准Asp.NET Web应用程序项目

我在Site.css中更改了一行-具体来说，我将div.menu ul li a:active中的：active样式更改为color:red

然后我启动应用程序，点击主菜单项并将其拖动几毫米

果不其然，当我松开鼠标按钮时，菜单项仍然使用：active样式

测试

我最初在IE8中发现了这个问题，但它仍然存在于IE9以及Firefox/Aurora中

不过，Chrome和Safari通常会将菜单项恢复到预期状态。它们都会在元素的边缘周围留下发光效果。我还没有在歌剧中测试过

…利润？

我已经搜索了整个网络，寻找一个解决方案，但就是找不到。事实上，很难找到一个问题的参考，我最接近的是Sitepoint的一个参考页面，其中提到了类似IE7中的一个bug

有人有什么想法吗

代码

这是Site.Master中的代码-我已重命名菜单项以保护罪魁祸首：

<div class="topnav">
    <asp:menu id="topnav" runat="server" orientation="Horizontal" renderingmode="List" skiplinktext="" maximumdynamicdisplaylevels="1" viewstatemode="Enabled" >
        <items>
            <asp:menuitem navigateurl="~/Default.aspx" text="Home" value="home"></asp:menuitem>
            <asp:menuitem navigateurl="~/Overview.aspx" text="Overview" value="overview"></asp:menuitem>
            <asp:menuitem navigateurl="~/Benefits.aspx" text="Benefits" value="benefits"></asp:menuitem>
            <asp:menuitem navigateurl="~/Hardware.aspx" text="Hardware" value="hardware"></asp:menuitem>
            <asp:menuitem navigateurl="~/SDK.aspx" text="Develop" value="SDK"></asp:menuitem>
        </items>
    </asp:menu>
</div>

最后但并非最不重要的一点是，我在页面上运行的javascript可以帮助实现这个菜单

.right .topnavcont
{
    width: 767px;
    background-color: #dddddd !important;
    height: 22px;
}

.topnav #topnav li
{
    float: left;
}

.topnav
{
    background-color: #ddd;      
    line-height: 22px;
    float: right;
    margin-right: 11px;
    background: url(../img/shadow.gif) repeat-y top right;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #777;
    text-align: center;
}

.topnav li
{
    width: 109px;
}

.topnav a:link, .topnav a:visited
{
    color: #777;
    display: block;
    background-image: url(../img/bg_n-s.gif);
    background-repeat: repeat-x;
    text-decoration: none;
    visibility: visible;
}

.topnav  a:hover
{
    color: #fff !important;
    background-image: url(../img/bg_h-s.gif);
    display: block;
    visibility: visible;
}

.topnav a:active
{
    background-image: url(../img/bg_a-s.gif);
    display: block;
    color: #fff;
    visibility: visible;
}

.topnav .current
{
    color: #fff !important;
    background-image: url(../img/bg_h-s.gif) !important;
}

$(function ()
{
    var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
    $('.topnav ul li a').each(function ()
    {
        if ($(this).attr('href') == pathname)
        {
            $(this).addClass('current');
        }
    });
});

---

在彻底改变了我的想法并考虑从事编织篮子的职业后，我想我已经找到了一个半生不熟的解决办法

秘密在于Asp.Net菜单控件完全无法正确处理css伪类

在上面的代码中，您可以看到我定义了一个a:active伪类，这就是问题所在

Asp.Net不希望您使用伪类，它希望您在设计时使用web控件中公开的属性。因此，您应该设置属性

staticselectedstyle cssclass

，而不是只使用古老的：link:visted:hover:active伪类

这不一定是件坏事，尽管它看起来确实有点冗长和违反直觉

但要记住的是，确保以元素为目标的：active伪类不在

staticselectedstyle cssclass

代码之前，因为出于某种原因，浏览器似乎只从每个类中提取一些零碎的东西，同时也会出错

现在，我的topnav css如下所示：

.topnav
{
    background-color: #ddd;
    /*margin-top: 1px;*/
    line-height: 22px;
    float: right;
    margin-right: 11px;
    background: url(../img/shadow.gif) repeat-y top right;


    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #777;
    text-align: center;
}

.topnav #topnav li
{
    float: left;
}

.right .topnavcont
{
    width: 767px;
    background-color: #dddddd !important;
    height: 22px;
}

.topnav li
{
    width: 109px;
}

.topnav a:link, .topnav a:visited
{
    color: #777;
    display: block;
    background-image: url(../img/bg_n-s.gif);
    background-repeat: repeat-x;
    text-decoration: none;
    visibility: visible;
}

.topnav  a:hover 
{
    color: #fff !important;
    background-image: url(../img/bg_h-s.gif);
    display: block;
    visibility: visible;
}

topnav .staticmenuitemselected
{
    color: #777;
    display: block;
    background-image: url(../img/bg_n-s.gif);
    background-repeat: repeat-x;
    text-decoration: none;
    visibility: visible;
}

不过，我还没有完全完成对：active伪类的实验，因为我确实希望在菜单上单击一个按钮的动作，当它执行那个闪光的clicky操作时，给我一个温暖的模糊发光

---

感谢阅读/希望这对某人有所帮助。

我有一个半生不熟的解决方案，我刚刚试着发布，结果被告知我的声誉不高，无法在发布后八小时内自我回答问题。一切都很好，我会尽快公布答案。