我的链接不起作用（应该是简单的修复）答案

【问题标题】：my links aren't working (should be simple fix)我的链接不起作用（应该是简单的修复）
【发布时间】：2015-01-23 18:07:30
【问题描述】：

我对此页面右上角的链接有疑问 (http://athemespage03.tumblr.com/)。我已经检查了代码中的所有内容一百万次，以确保所有内容都输入正确，并且确实如此。我似乎无法找出问题所在。帮忙？

这是我的样式表：（问题在于 div id "squares"）

body {
       background: url("https://unsplash.imgix.net/reserve/wpYap0TYQ3mElk0kRbYn_LagunaHIke.jpg?q=75&fm=jpg&s=d189029620c20323a937f5125a6ad96d")
       no-repeat center center fixed; /*CHANGE BACKGROUND IMAGE HERE*/
       -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-style:none;
font-family:calibri;
color:{color:text};
font-size:9px;
   }

   body, a, a:hover {
   cursor: url(http://img69.imageshack.us/img69/7673/cursorw.png), progress;
   }

    /*everything*/

    #everything {
    margin-left:250px;
    margin-top:100px;
    }

    /*--title--*/

    #title {
    font-family: 'Reenie Beanie', cursive;
    font-size:80px;
    position: fixed;
    top: 80px;
    left: 280px;
    letter-spacing: 3px;
    color:#fff; /*--CHANGE TITLE COLOR HERE--*/
    z-index: 1;
overflow: auto;
width: 98%; 
    }


#transbox {

position: fixed;
top: 150px;
right: 200px;
width: 600px;
height: 350px;
background-color: #fff;
border: 1px solid #000;
opacity: 0.7;
filter: alpha(opacity=60); 
}

#transbox a:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}

    /*--links--*/

    #squares {
    width:630px;
    font-size:10px;
    font-family:'calibri';
    text-transform:uppercase;
    text-align:center;
    margin-top:10px;
    margin-left:250px;
    }

    #squares a {
    padding:3px;
    color:#000;
    display: inline-block;
    margin-left: 2px;
    height: 5px;
    width: 5px;
    border: solid #000 1px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    }

    #squares a:hover {
    color:#fff;
    background-color:#999;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    }


   #navigation a {
     font-family:'calibri';
    display:block;
    color:#000;
    font-size:12px;
    margin-top: 20px;
    padding:6px;
    text-align:center;
    letter-spacing:2px;
    text-transform:uppercase;
    text-decoration: underline;
    margin-bottom:5px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;

   }


 #navigation a:hover {
    background:#999;
    color:#fff;
    opacity: 1.0;
filter: alpha(opacity=100);
    }

这是我实际的 html 正文：

<div id="everything">

<div id="title">navigation</div>

<div id="transbox">

    <div id="squares">
        <a href="/" title="home"></a>
        <a href="/ask" title="message"></a>
        <a href="http://tumblr.com/dashboard" title="dash"></a>
    </div>


<div id="navigation">
    <table style="width:100%">
        <tr>
            <td><a href="/">link</a></td>
            <td><a href="/">link</a></td>
            <td><a href="/">link</a></td>
        </tr>

        <tr>
            <td><a href="/">link</a></td>
            <td><a href="/">link</a></td>
            <td><a href="/">link</a></td>
        </tr>

        <tr>
            <td><a href="/">link</a></td>
            <td><a href="/">link</a></td>
            <td><a href="/">link</a></td>
        </tr>

        <tr>
            <td><a href="/">link</a></td>
            <td><a href="/">link</a></td>
            <td><a href="/">link</a></td>
        </tr>

        <tr>
            <td><a href="/">link</a></td>
            <td><a href="/">link</a></td>
            <td><a href="/">link</a></td>
        </tr>
    </table>
</div>

</div>

</body>

是的，我似乎无法弄清楚。如果您需要我的代码的任何其他部分来找出问题所在，请告诉我。谢谢！

【问题讨论】：

#title id、width: 98%; 的 CSS 属性导致了问题。如果您还没有听说过，Firebug 在这种情况下是您的朋友。让您在浏览器中检查您的 CSS 以及许多其他有用的功能。
#title 位于链接的顶部，即使它是“不可见的”，您也需要正确定位它（:fixed 在这种情况下不好）或通过更改 z- 来解决它索引，使用指针事件：无或其他

标签： html css hyperlink hover

【解决方案1】：

我认为问题出在您的#title div 上，使用width: 98%; 和z-index: 1; 会导致这种情况，因为当您尝试将a 元素悬停在#square div 中时，实际上您是在悬停#title div 因为它有 98% 的宽度和一个 z-index: 1; 所以它覆盖了方形 div。

您可以在以下屏幕截图中看到：

尝试从您的标题 div CSS 中删除这两个属性。

【讨论】：

【解决方案2】：

div 标题在方形链接上方！

【讨论】：