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

Posted 2023-03-06

【中文标题】导航栏中的 1 个按钮未显示悬停、按下和活动状态

【英文标题】：Hover, Pressed and Active States Not Showing for 1 Button In Nav Bar

【发布时间】：2011-04-07 23:59:33

【问题描述】：

我有一个基于 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; 
#inputStringbackground: url(/images/globalnav/searchform.png); padding: 1px 20px 0 20px; width: 113px; height: 20px; margin-top: 7px; border: none; outline: none; 

可能是问题所在。

我一直在使用 Google 的 DevTools（基本上是 FireBug）来尝试隔离问题，但我没有任何运气。

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

源图像 (http://marioplanet.com/images/globalnav/wanzart.png) 具有实际状态，所以这不是问题..

【参考方案1】：

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

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

记住顺序的简单方法 -> 爱恨交加

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

您的按钮 CSS 也太具体了 IMO。如果您使用的是 ID，假设它们在页面上是唯一的（它们应该是唯一的），您可以安全地直接定位它们。

【讨论】：

感谢链接组织提示，我已经对其进行了重组，如果您访问该页面，您就会知道。

【参考方案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，这可能是预期的...当您在主页上时，该主页不可悬停。

【讨论】：

太棒了！现在，是否有原因导致一旦将其删除，活动状态仍然无法正常运行？

@BOSS - 如果你删除它，它确实有效，这条线仍然存在于你的css中：#globalheader.home #globalnav li#gn-home a:hover background-position: 0px -37px !important;

哦，我的错，我想我没有正确上传！ xD 非常感谢！