Question

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

这是我遇到的问题。

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

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

当人们开始在菜单上点击时出现问题。让我们说你在主页上。第一个菜单项突出显示。让我们说现在 - 无论出于何种原因，只有用户可以想出 - 你点击并拖动其中一个菜单项。它不必太远，它可能只有一毫米或两个。预期的行为是拖动将取消点击，页面将保持原样并且点击拖动的menuitemw将返回其原来的状态。

实际发生的是拖动否定点击，页面停留在原位，点击拖动的menuitem似乎保留：活动样式（如果存在），或者：hover样式如果：active样式不存在

复制

但是看起来这可能是Asp.Net菜单中的一个错误。

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

我在Site.css中更改了一行 - 具体来说，我在div.menu中更改了：active style a a：active to color：red;

然后我解开了应用程序，单击了主菜单项并将其拖动了几毫米。

果然，当我放开鼠标按钮时，菜单项会停留在：活动样式。

测试

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

Chrome和Safari然而，主要是将菜单项恢复到预期状态。它们都会在元素的边缘留下闪亮的效果。我没有在Opera中测试它。

....利润吗

我已经在网上寻找解决方案，但找不到一个。实际上，找到问题的引用非常困难，我最接近的是Sitepoint的一个参考页面，它提到了类似于IE7中的错误。

http://reference.sitepoint.com/css/pseudoclass-hover

有人有什么想法吗？

代码

以下是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>

当我在这里时，我还会发布适用于此菜单的CSS。

.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;
}

最后但并非最不重要的是，我在页面上运行的javascript来协助这个菜单。

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

Answer 1

在撕掉我的头发并考虑从事篮子编织的职业之后，我想我已经设法为此提出了一个半生不熟的解决方案。

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

在我上面的代码中，你可以看到我已经定义了一个a：active pseudoclass，这就是问题所在。

Asp.Net不希望您使用伪类，它希望您在设计时使用Web控件中公开的属性。所以，而不是仅仅坚持使用古老的：link：visited：hover：active pseudoclasses，你应该设置属性staticselectedstyle-cssclass。

不一定是坏事，虽然看起来确实有点冗长和违反直觉。

要记住的是要确保：目标元素的活动伪类不在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;
}

我还没有完全尝试过：有效的伪类，因为我确实想要点击菜单上的一个按钮，当它做那个华而不实的点击时，给我一个温暖的模糊光芒。

感谢阅读/希望这有助于某人。

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

1 个答案: