title: Floating Links Hover
body: <p>I'm brand-new to html and decided to make a start page for Firefox. The problem I have is that when I mouseover above and below my links' text my mouse's cursor changes to the hotlink pointy hand, as it would normally when you mouseover a link. But it does this within a 20+ pixel radius above and below that link in an invisible field it would seem. It doesn't do this to the left and right of the link text. I want to fix it so that it only changes when my mouse is directly over the text, as all website links do. I'm probably missing some code. Here's my full html code. Any help is greatly appreciated.</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  &lt;meta name="author" content="name"&gt;
  &lt;title&gt;~name@inferno&lt;/title&gt;
  &lt;link href="favicon.ico" rel="icon"&gt;
  &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
  &lt;style type="text/css"&gt;
  body {
      background: url(x.jpg) no-repeat;
      background-size: cover;
      background-color: #0A0F14;
      -moz-appearance: none;
  }
  td {
      transition: all 2s ease 0.9s;
      color: inherit;
      -moz-appearance: none;
  }
  a:link {
      color: inherit;
      text-decoration: none;
  }
  a:visited {
      color: inherit;
      text-decoration: none;
  }
  a:hover {
      color: inherit;
      text-decoration: none;
  }
  a:active {
      color: inherit;
      text-decoration: none;
  }
  a {
      font-family: "Segoe UI";
      font-size: 12px;
      font-weight: bold;
      outline: none;
      float: right;
      margin-right: 15px;
      margin-top: -3px;
  }
  td:hover{
      background: rgba(16, 21, 27, 0);
  }
  .box {
  background: #10151B;
  border-radius: 0px 0px 15px 10px;
  line-height: 50px;
  width: 140px;
  height: 592px;
  position: fixed;
  top: 1px;
  bottom: 0px;
  left: 0px;
  }
  .icon {
  color: #D12248;
  float: left;
  margin-top: 10px;
  text-indent: 5px;
  }
  .icon2 {
  color: #D19011;
  float: left;
  margin-top: 10px;
  text-indent: 5px;
  }
  .icon3 {
  color: #57A3D1;
  float: left;
  margin-top: 10px;
  text-indent: 5px;
  }
  .icon4 {
  color: #AAD130;
  float: left;
  margin-top: 10px;
  text-indent: 5px;
  }
  .icon5 {
  color: #4ED1B3;
  float: left;
  margin-top: 10px;
  text-indent: 5px;
  }
  .icon6 {
  color: #98D1CE;
  float: left;
  margin-top: 10px;
  text-indent: 5px;
  }
  </code></pre>