0

ロゴの横に SO と変わらない基本的なメニュー バーがあります (質問、タグなど)。すべてのスタイリングを持っていますが、リンクを追加すると変化します。これは説明が難しいので、メニューバーのスタイリングは次のとおりです。

div.menubar ul
{
background-color:#FF0000;
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
div.menubar li
{
display:inline;
margin:0;
padding:0;
}
div.menubar a:hover, div.menubar a:active
{
background-color:#00FF00;//should highlight in green on mouseover
}
div.menubar a:link, div.menubar a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#FF0000;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}

メニューバーのコード:

<div class = "menubar">
<ul>
<li><a href="home.php">Home</a></li><!--does not work-->
<li><a href="#news">News</a></li><!--works-->
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>

リンクの href がリンクのようなものである場合、#homeマウスオーバーでリンクの背景が緑色に変わります。ただし、リンクの href が の場合はhome.php何も起こりません。なぜこうなった？

4

3 に答える 3

2

簡単な修正として、ホバー状態を CSS の下部に移動します。

長期的には CSS の特異性を見て、ホバー状態をより「重要な」ものでオーバーライドしていないことを確認してください。

ここでフィドル: http://jsfiddle.net/mq7n3/

これを一番下に移動

div.menubar a:hover, div.menubar a:active
{
background-color:#00FF00;//should highlight in green on mouseover
}
于 2013-10-15T12:42:54.213 に答える