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

Question

我对此页面右上角的链接存在问题（http://athemespage03.tumblr.com/）。我已经在我的代码中查了一百万次，试图确保它的输入都是正确的，而且确实是这样。我似乎无法找出什么是错的。帮助

这是我的样式表:(问题在于div id“square”）

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>

所以是的，我似乎无法弄明白。如果您需要我的代码的任何其他部分来弄清楚什么是错的，请告诉我。谢谢！

Answer 1

我认为问题在于您的#title div，使用width: 98%;而z-index: 1;导致了这一问题，因为当您尝试将a元素悬停在{{1}时div，实际上你正在徘徊#square div，因为它有98％的宽度和#title所以它覆盖了方形div。

正如您在以下屏幕截图中看到的那样：

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

Answer 2

div标题位于方形链接之上！