精灵和绝对定位问题:2个工作，2个不工作？
对不起，我知道精灵的介绍已经很多了，但我还没能找到与我的特定上下文相关的答案。
我有4个绝对定位的按钮使用相同的.png文件与3个状态(链接，悬停，活动)的‘主页’按钮悬停工作，但悬停区域不是整个按钮，对于‘汽车’按钮，悬停是所有的按钮，但其他2个按钮没有可点击或悬停区域。
大多数关于这个问题的文章都说要调整高度/宽度，但对我来说，这样做只是移动图像，而不是文本，也不会改变任何悬停问题……不知道还能尝试什么..
必要的风格：
span.nav-button-adjust { display:block;
position:relative;
top:3px;
left:9px;
}
span.nav-button a:link,
span.nav-button a:visited { display:block;
width: 91px; height: 30px;
background-image: url(images/nav-button.png);
background-position: top;
background-repeat: no-repeat;
font-family:arial black;
text-decoration:none;
color:#1461b2;
}
span.nav-button a:hover { background-image: url(images/nav-button.png);
background-position: center;
}
span.nav-button a:active { background-image: url(images/nav-button.png);
background-position: bottom;
}必要的html：
<span class="nav-button"><a href="home.php" style="position:absolute;left:420px;top:17px"><span class="nav-button-adjust"> HOME</span></a></span>
<span class="nav-button"><a href="about.php" style="position:absolute;left:522px;top:17px"><span class="nav-button-adjust"> ABOUT</span></a></span>
<span class="nav-button"><a href="cars.php" style="position:absolute;left:392px;top:59px"><span class="nav-button-adjust"> CARS</span></a></span>
<span class="nav-button"><a href="search.php" style="position:absolute;left:496px;top:59px"><span class="nav-button-adjust">SEARCH</span></a></span>编辑:每个请求：
我正在使用的图像：https://dl.dropboxusercontent.com/u/12017360/cars/images/nav-button.png
回答 2
Stack Overflow用户
发布于 2013-07-17 16:26:57
你的CSS，尤其是HTML，有太多的问题要处理。你可以整理一下你想要做的事情。你不需要使用绝对定位。
在下面的jsFiddle中，您会注意到，当您悬停或单击一个链接时，背景图像的另一部分的一小部分会突出显示出来。这与你制作/设置精灵的方式有关。
http://jsfiddle.net/ucsNH/
不确定这些链接是否必须是30px高。如果没有，你可以通过设置#nav a { height: 29px; line-height: 29px;并将background-positions调整1px来修复它们，这样它们就会是0 -1px, 0 -30px, 0 -59px。参见second jsFiddle。
http://jsfiddle.net/ucsNH/2/
CSS
ul, li {
margin: 0;
padding: 0;
list-style: none;
font: 12px/1.5em Arial, sans-serif; /* this should be inherited */
}
#nav {
width: 202px; /* ( 5px + 91px + 5px ) x 2 */
}
#nav li {
float: left;
margin: 5px;
}
#nav a:link,
#nav a:visited {
display: block;
width: 91px;
height: 30px;
line-height: 30px; /* vertically centers text */
text-transform: uppercase;
color:#1461b2;
background: url(images/nav-button.png) no-repeat 0 0;
text-decoration: none;
text-align: center;
font-weight: bold;
}
#nav a:hover {
background-position: 0 -29px;
}
#nav a:active {
background-position: 0 -58px;
color: white;
}
.home,
.about {
position: relative;
left: 25%;
}HTML
<ul id="nav">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li><a href="#">Cars</a></li>
<li><a href="#">Search</a></li>
</ul>HTML更整洁了，你不这样认为吗？
导航应该放在一个无序列表<ul>中。请避免像锚<a>标签上那样的内联样式。在锚定标记中不需要span标记，也不应该使用 来推东西(文本)。如果您需要一些空间，请使用margin和padding。这就是他们的用处！
Stack Overflow用户
发布于 2013-07-17 14:04:38
给你，我创建了一个jfiddle，所有的悬停按钮都在工作，只需点击它来检查，这就是你要找的吗？如果是，请单击左侧的复选框选择此答案作为正确答案。
我所做的唯一改变就是定位，
<span class="nav-button"><a href="home.php" style="position:absolute;left:220px;top:17px"><span class="nav-button-adjust"> HOME</span>
</a>
</span>
<span class="nav-button"><a href="about.php" style="position:absolute;left:322px;top:17px"><span class="nav-button-adjust"> ABOUT</span>
</a>
</span>
<span class="nav-button"><a href="cars.php" style="position:absolute;left:192px;top:59px"><span class="nav-button-adjust"> CARS</span>
</a>
</span>
<span class="nav-button"><a href="search.php" style="position:absolute;left:296px;top:59px"><span class="nav-button-adjust">SEARCH</span>
</a>
</span>https://stackoverflow.com/questions/17690940
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号