0

我创建了一个导航菜单，想知道为什么当我将鼠标悬停在包含链接的 li 项目上时，链接不显示？

这是我的包含链接的 Html

<ul id="nav">
            <li class="nav-button" id="home"><a href="Index.html"></a></li>
            <li class="nav-button" id="whatIs1031"><a href="whatIs1031.html"></a></li>
            <li class="nav-button" id="exchange1031"><a href="exchangeRequ.html"></a></li>
            <li class="nav-button" id="typesOfExchange"><a href="typesOfExchange.html"></a></li>
            <li class="nav-button" id="whyCLX"><a href="howToStart.html"></a></li>
            <li class="nav-button" id="howToStart"><a href="whyCLX.html"></a></li>
            <li class="nav-button" id="resources"><a href="resources.html"></a></li>
            <li class="nav-button" id="faq"><a href="fAQs.html"></a></li>
            <li class="nav-button" id="fee"><a href="fees.html"></a></li>
            <li class="nav-button" id="contactUs"><a href="contactUs.html"></a></li>
        </ul>

这是我的css，其中包含对显示每个列表项的精灵的引用。

#home, #home, #whatIs1031, #exchange1031, #typesOfExchange, #h-typesOfExchange, #whyCLX, #h-whyCLX, #howToStart, #resources, #h-resources, #faq, #h-faq, #fee, #h-fee, #contactUs, #h-contactUs{
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
    width: 225px;
    height: 30px;
}

#home:hover{
    background-position: -222px 0;
}

#home{
    background-position: 0 0;
}

#whatIs1031{
    background-position: 0 -36px;
}

#whatIs1031:hover{
    background-position: -223px -36px;
}

#exchange1031{
    background-position: 0 -72px;
}

#exchange1031:hover{
    background-position: -224px -73px;
}

#typesOfExchange{
    background-position: 0 -111px;
}

#typesOfExchange:hover{
    background-position: -226px -112px;
}

#whyCLX:hover{
    background-position: -227px -150px;
}

#whyCLX{
    background-position: 0 -150px;
}

#howToStart{
    background-position: 0 -190px;
}

#howToStart:hover{
    background-position: -230px -189px;
}

#resources:hover{
    background-position: -230px -226px;
}

#resources{
    background-position: 0 -227px ;
}

#faq{
    background-position: 0 -264px ;
}

#faq:hover{
    background-position: -230px -263px ;
}

#fee{
    background-position: 0 -302px ;
}

#fee:hover{
    background-position: -231px -300px ;
}

#contactUs{
    background-position: 0 -341px ;
}

编辑：这是关于代码笔的演示页面http://codepen.io/Austin-Davis/pen/Fdhej

4

4 回答 4

3

在标签中<a></a>尝试输入链接的名称... xD

<a>name of link</a>

或者，如果您喜欢没有文本的字段，请使用标签<li>内的标签<a>

<a href="www.google.com"><li class="nav-button"></li></a>

请参阅此示例 jsfiddle

问候。

于 2013-01-09T22:34:35.620 回答
3

锚标记 ( <a>) 是内联元素。由于它们没有任何内容，因此它们不会被渲染，而您只有背景。

用信息填充它们（例如链接的实际名称而不是精灵）或使用不间断的空间实体&nbsp; 和 display: block锚标记。您也可以将这两种技术结合起来。

编辑：既然你问了一个具体的例子：

#nav a { display:block; }

<ul id="nav">
    <li class="nav-button" id="home">
        <a href="Index.html">&nbsp;</a>
    </li>
    <li class="nav-button" id="whatIs1031">
        <a href="whatIs1031.html">&nbsp;</a>
    </li>
    <!-- ... -->
</ul>

但是，我相信这仍然不是最好的解决方案。我会想出一些谎言：

#nav a {
    display: block; 
    padding-left: 15px; /* adjust this value to your image */
    background: url(sprite_a.png) no-repeat;  /* off-image */
}
#nav a:hover{
    background: url(sprite_b.png) no-repeat;  /* on-image */
}

<ul>
  <li><a href="Index.html">Home</a></li>
  <li><a href="whatis1031.html">What is a 1031 exchange?</a></li>
  <li><a href="exchangeRequ.html">1031 Exchange Requirements</a></li>
  <!-- ... -->
</ul>
于 2013-01-09T22:37:46.990 回答
1

首先，您的链接没有 CSS 样式，也没有内容，因此没有大小，只有您的列表元素有大小。对于将样式应用于它们的链接，它应该如下所示：

<li class="nav-button"><a id="fee" href="fees.html"></a></li>

对于没有显示图像的问题，这对我来说绝对没问题。除了在 css 中引用错误的最后一项：

#h-contactUs

应该：

#contactUs;
于 2013-01-09T22:52:05.773 回答
0 
<ul id="nav">

    <li class="nav-button"> <a href="Index.html">Index</a></li>
    <li class="nav-button"> <a href="whatIs1031.html">whatIs1031</a></li>
    <li class="nav-button"> <a href="exchangeRequ.html">exchange1031</a></li>
    <li class="nav-button"> <a href="typesOfExchange.html">typesOfExchange</a></li>
    <li class="nav-button"> <a href="howToStart.html">howToStart</a></li>
    <li class="nav-button"> <a href="whyCLX.html">whyCLX</a></li>
    <li class="nav-button"> <a href="resources.html">resources</a></li>
    <li class="nav-button"> <a href="fAQs.html">faq</a></li>
    <li class="nav-button"> <a href="fees.html">fee</a></li>
    <li class="nav-button"> <a href="contactUs.html">contactUs</a></li>

</ul>

这允许您将鼠标悬停在、单击并被发送到指定按钮已链接到的“href”链接。

于 2016-08-11T11:26:03.337 回答