CSS悬停仅适用于下半部分

Question

我将div部分的位置从绝对更改为relative。当我将光标移动到div的顶部进行更改后，只能单击下半部分。只有当我将光标移动到下半部分时，悬停图像才会改变。

.vote2 {
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
float: left;
position: relative;
top: -920px;
left: 800px;
border-style: solid;
border-color: Black;


}

a div.vote2:hover {
width: 100px; 
border-style: solid;
border-color: Black;
background: url('http://localhost/Images/x.jpg');
display:block;

}

.wrapper{
width: 1095px;
margin-left: auto;
margin-right: auto;
height:600px;   
 }

html部分

  <div class="wrapper">
     <a href=" http://localhost/Login.php"><div class="vote2"></div></a> 
  </div>