asp.net4.0Webアプリケーションで標準のasp.netメニューを使用しています。明確にするために、これは標準のWebアプリケーションであり、使用可能なMVCアプリケーションのバージョンではありません。
これが私が抱えている問題です。
とても簡単な設定です。メニューのさまざまな状態、：link、：visited、：hover、：activeをCSSで確認しています。
ご想像のとおり、これらの状態の間には目に見える違いがあります。さらに、現在のページのリンクを強調表示するjavascriptを実行しています。これは、もう1つのかなり正常なアクティビティです。これまでのところ、不思議なことや曖昧なことは何もありません。
問題は、人々がメニューをクリックし始めるときに起こります。あなたがホームページにいるとしましょう。最初のメニュー項目が強調表示されます。ここで、ユーザーだけが思いつくことができる理由が何であれ、メニュー項目の1つをクリックしてドラッグするとします。遠くにある必要はありません。1〜2ミリにすることができます。予想される動作は、ドラッグによってクリックが無効になり、ページが元の位置に留まり、クリックでドラッグされたmenuitemが元の状態に戻ることです。
実際に発生するのは、ドラッグによってクリックが無効になり、ページがそのまま残り、クリックでドラッグされたメニュー項目が：activeスタイルを保持しているように見えるか、：activeスタイルが存在しない場合は：hoverスタイルを保持しているようです。
レプリケーション：
ただし、これはAsp.Netメニューのバグである可能性があります。
プロジェクトの外部で問題を再現するために、VS2010のテンプレートを使用して標準のAsp.NETWebアプリケーションプロジェクトを作成しました。
Site.cssの1行を変更しました。具体的には、div.menu ul li a：activeの：activeスタイルをcolor：redに変更しました。
次に、アプリケーションを起動し、[ホーム]メニュー項目をクリックして、数ミリメートルドラッグしました。
案の定、マウスボタンを離すと、メニュー項目が：activeスタイルのままになりました。
テスト
私はもともとIE8で問題を発見しましたが、それはIE9とFirefox/Auroraにまだあります。
ただし、ChromeとSafariは、ほとんどの場合、メニュー項目を意図した状態に戻します。それらは両方とも、要素のエッジの周りに光沢のある効果を残します。Operaではテストしていません。
....利益？
私はこれに対する解決策を探してネットを探しましたが、それを見つけることができません。実際、問題への参照を見つけるのは非常に困難です。私が最も近いのは、IE7のバグに似たものについて言及しているSitepointの参照ページの1つでした。
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');
}
});
});