Question

我有一个基于CSS精灵的Apple主题导航栏，你可以在这里查看：

http://www.marioplanet.com/index.asp

现在，出于某种原因，我不知道为什么，“主页”按钮的悬停，按下和活动状态似乎存在问题。出于某种原因，它只是静态的。

此文件http://www.marioplanet.com/css/nav.css

具有以下代码：

/* GLOBALHEADER */
#globalheader { width: 671px; height: 37px; margin: auto; position: relative; z-index: 100; }
#globalheader #globalnav { margin: 0; padding: 0; zoom: 1; width: 100%;}
#globalheader #globalnav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 103px; height: 37px; text-indent:-1000em; overflow: hidden; background-image:url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }
#globalheader #globalsearch { background-image: url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }

/* BUTTONS */
#globalheader #globalnav li#gn-home a { background-position: 0px 0px; }
#globalheader #globalnav li#gn-catalog a { background-position: -103px 0px; }
#globalheader #globalnav li#gn-about a { background-position: -206px 0px; }
#globalheader #globalnav li#gn-contact a { background-position: -309px 0px; }
#globalheader #globalnav li#gn-media a { background-position: -412px 0px; }

/* OVER STATES */
#globalheader #globalnav li#gn-home a:hover { background-position: 0px -37px; }
#globalheader #globalnav li#gn-catalog a:hover { background-position: -103px -37px; }
#globalheader #globalnav li#gn-about a:hover { background-position: -206px -37px; }
#globalheader #globalnav li#gn-contact a:hover { background-position: -309px -37px; }
#globalheader #globalnav li#gn-media a:hover { background-position: -412px -37px; }

/* PRESSED STATES */
#globalheader #globalnav li#gn-home a:active { background-position: 0px -76px; }
#globalheader #globalnav li#gn-catalog a:active { background-position: -103px -76px; }
#globalheader #globalnav li#gn-about a:active { background-position: -206px -76px; }
#globalheader #globalnav li#gn-contact a:active { background-position: -309px -76px; }
#globalheader #globalnav li#gn-media a:active { background-position: -412px -76px; }

/* ON STATES */
#globalheader.home #globalnav li#gn-home a:hover { background-position: 0px 0px !important;}
#globalheader.catalog #globalnav li#gn-catalog a { background-position: -103px -114px !important; }
#globalheader.about #globalnav li#gn-about a { background-position: -206px -114px !important; }
#globalheader.contact #globalnav li#gn-contact a { background-position: -309px -114px !important; }
#globalheader.media #globalnav li#gn-media a { background-position: -412px -114px !important; }

/* GLOBAL SEARCH */
#globalsearch {width: 156px; height: 37px; position: absolute; top:0; right: 0; background-position: 100% 0; background-repeat: no-repeat; text-align: center; border-width: 0px; }
#inputString{background: url(/images/globalnav/searchform.png); padding: 1px 20px 0 20px; width: 113px; height: 20px; margin-top: 7px; border: none; outline: none; }

可能是问题所在。

我一直在谷歌的DevTools（基本上是FireBug）中试图找出问题，但我没有运气。

“主页”按钮状态的选择器显示准确。

源图像（http://marioplanet.com/images/globalnav/wanzart.png）具有实际状态，因此这不是问题。

Answer 1

请记住，当您设置超链接及其不同状态的样式时，按以下顺序设置样式非常重要：

':link' or just 'a' then
':visited' then
':hover' then
':active' then

记住订单的简单方法 - ＆gt; LoVe HAte

因此，请尝试按每个按钮重新排序CSS代码，而不是按状态重新排序。

另外你的按钮CSS太具体了IMO。如果您正在使用ID，假设它们在页面上是唯一的，那么您可以直接将它们直接定位。

Answer 2

您在/* ON STATES */下的规则正是导致它的原因：

#globalheader.home #globalnav li#gn-home a:hover { background-position: 0px 0px !important;}

由于您处于主屏幕，因此您#globalheader看起来像这样：

<div id="globalheader" class="home">

与其他选项不同，#globalheader.home选择器在此处应用，覆盖所有悬停状态。要么删除此规则，要么将其更改为background-position: 0px -37px，这可能是预期的...当您在主页上时，主页不可移动。

悬停，按下和活动状态不显示导航栏中的1个按钮

2 个答案: