自定义twitter-bootstrap分页

Question

我想更改bootstrap分页以便没有边框，但是在悬停和活动a周围会出现边框。当其中一个边界上有白色whiteness on the border时，我实现了一些奇怪的效果。我做错了什么？

＆＃13;

＆＃13;

.pagination{ 
	height: 25px;
	a.left-arrow{
		height: 15px;
		width: 15px;
		margin:0;
		margin-top: 5px;
		background-image: url("../img/arrow-left.png");
		background-repeat: no-repeat;
		background-position: center left;
}
	a.right-arrow{
		height: 15px;
		width: 15px;
		margin: 0;
		margin-top: 5px;
		background-image: url("../img/arrow-right.png");
		background-repeat: no-repeat;
		background-position: center right;
	}
}
.pagination > li > a, .pagination > li > span{
	padding: 0 8px;
	margin-left: 0;
	border: none;
	color: $text-color;
	font-size: 18px;
}
.pagination > li > a:hover, .pagination > li > a.active{
	background-color: white;
	color: $second-color;
	border: 1px solid $second-color;
	border-radius: 0;
	margin: -1px;
}
.pagination > li > a.right-arrow:hover, .pagination > li > a.left-arrow:hover{
	border: none;
	margin: 0;
	margin-top: 5px;
	opacity: 0.5;
	color: blue;
}
.pagination > li > span:hover{
	background-color: white;
	border: none;
	}

＆＃13;

<nav class="pager">
  <ul class="pagination">
    <li>
      <a href="#" class="left-arrow" aria-label="Previous">
        <span aria-hidden="true"></span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#"class="active">3</a></li>
    <li><a href="#" >4</a></li>
    <li><a href="#">5</a></li>
    <li><span>...</span></li>
    <li><a href="#">10</a></li>
    <li>
      <a href="#" class="right-arrow" aria-label="Next">
        <span aria-hidden="true"></span>
      </a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;