0

抱歉，我知道精灵涵盖了很多，但我无法根据我的具体上下文找到答案。

我有 4 个绝对定位的按钮，使用具有 3 个状态（链接、悬停、活动）的相同 .png 文件，“主页”按钮悬停有效，但悬停区域不是整个按钮，“汽车”按钮悬停是所有按钮，但其他 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

4

2 回答 2

0

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

在下面的 jsFiddle 中，您会注意到，当您悬停或单击链接时，背景图像的另一部分的一小部分会穿过。这与你如何制作/设置你的精灵有关。

http://jsfiddle.net/ucsNH/

不确定这些链接是否必须为 30 像素高。如果不是，您可以通过设置#nav a { height: 29px; line-height: 29px;和调整background-positions1px 来修复它们，这样它们就可以了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>标签上的内联样式。锚标签内不需要跨度标签，您不应该使用它&nbsp;来推送东西（文本）。如果您需要一些空间使用margin和padding. 这就是他们的目的！

于 2013-07-17T08:26:56.500 回答
0

在这里，我创建了一个所有悬停按钮都可以工作的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>
于 2013-07-17T06:04:37.537 回答