Question

抱歉，我知道sprites被覆盖了很多，但我无法根据具体情况找到答案。

我有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">&nbsp;&nbsp;HOME</span></a></span>
<span class="nav-button"><a href="about.php" style="position:absolute;left:522px;top:17px"><span class="nav-button-adjust">&nbsp;ABOUT</span></a></span>
<span class="nav-button"><a href="cars.php" style="position:absolute;left:392px;top:59px"><span class="nav-button-adjust">&nbsp;&nbsp;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

Answer 1

在这里，我创建了一个jfiddle，其中所有悬停按钮都在工作，只需单击它进行检查，这就是您要查找的内容吗？如果是，请通过单击左侧的勾选将其选为正确答案。

我所做的唯一改变是定位，

<span class="nav-button"><a href="home.php" style="position:absolute;left:220px;top:17px"><span class="nav-button-adjust">&nbsp;&nbsp;HOME</span>
</a>
</span>
<span class="nav-button"><a href="about.php" style="position:absolute;left:322px;top:17px"><span class="nav-button-adjust">&nbsp;ABOUT</span>
</a>
</span>
<span class="nav-button"><a href="cars.php" style="position:absolute;left:192px;top:59px"><span class="nav-button-adjust">&nbsp;&nbsp;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>

Answer 2

你的CSS太多了，尤其是你的HTML。您可以使用以下内容整理您想要做的事情。您不需要使用绝对定位。

在下面的jsFiddle中，您会注意到当您悬停或单击链接时，背景图像的另一部分的一小部分会突然显示。这与您制作/设置精灵的方式有关。

http://jsfiddle.net/ucsNH/

不确定这些链接是否必须是30px高。如果不是，您可以通过设置#nav a { height: 29px; line-height: 29px;并将background-positions调整为1px来修复它们，这样它们就会0 -1px, 0 -30px, 0 -59px。见第二个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。这就是他们的目标！

Sprites和Absolute Positioning问题：2个工作，2个不工作？

2 个答案: