Question

我已经创建了一个导航菜单，并且想知道为什么当我在包含链接未显示的链接的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

上的演示页面

Answer 1

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

<a>name of link</a>

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

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

请参阅此Example jsfiddle

问候。

Answer 2

锚标记（<a>）是内联元素。由于它们没有任何内容，因此无法呈现，只有背景。

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

编辑：因为您询问了concrete example：

#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>

Answer 3

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

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

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

#h-contactUs

应该是：

#contactUs;

Answer 4

<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＆＃39;链接指定的按钮已链接到。

链接不显示链接

4 个答案: