我正在通过这样做来设置导航栏:
<div id="globalheader">
<ul id="globalnav">
<li id="home"><a href="#">Home</a></li>
</ul>
</div>
请注意我去掉了很多元素,因为这会使这个例子太大。
现在,这是我的 CSS:
/* GLOBALHEADER */
#globalheader { width: 506px; height: 36.75px; margin: 18px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 101.2px; height: 0; padding-top: 36.75px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalnav { background-image: url(navbar.png); background-repeat: no-repeat; }
/* BUTTONS */
#globalheader #globalnav li#home a { background-position: 0 0; }
/* OVER STATES */
#globalheader #globalnav li#home a:hover { background-position: 0 -37; }
/* PRESSED STATES */
#globalheader #globalnav li#home a:active { background-position: 0 -73.5px; }
现在,为了空间的缘故,我取出了更多元素(如我之前所说)。
这是问题所在:按钮显示正常,并且 active
状态。但是,hover
似乎根本不起作用。有什么想法吗?
最佳答案
尝试将 px 添加到您的位置:
#globalheader #globalnav li#home a:hover { background-position: 0 -37px; }
关于html - CSS 悬停 : doesn't seem to be working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4818733/