CSS中的悬停半径问题

Question

以下代码使箭头具有border-radius属性，并在悬停时切换颜色。顶部箭头非常好，当我将鼠标悬停在边框半径上时，它会切换颜色。但是，除非我离开边界半径，否则底部箭头不会切换颜色。有没有办法纠正这个问题？我假设它与悬停半径有关。 （边界半径是形成箭头的黑线）

<div class="image-arrows">
  <p><i class="up-arrow"></i></p>
  <p><i class="down-arrow"></i></p>
</div>


.image-arrows {
  width: 20px;
  height: 80px;
}

.image-arrows i {
  border: solid black;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  padding: 3.5px;
}

.image-arrows i:hover {
  border-color: pink;
}

.up-arrow {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down-arrow {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

Codepen