html - 如何在图像周围使用 CSS 设置透明边框？

Question

当有人悬停在链接上时，我试图在悬停时创建一个椭圆形。通过这样做，我丢失了作为链接一部分的图像。我知道我做错了什么，但是什么？

.pagelinks {
  float: right;
  margin-right: 48%;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  color: #828282;
}

.pagelinks a {
  text-decoration: none;
  display: inline-block;
  background-repeat: no-repeat;
}

.pagelinks a img:hover {
  border-radius: 3px;
  border: 1px solid #828282;
  padding: 7px;
  width: 1px;
  height: 0.5px;
}

<span class="pagelinks">
  <a href="{1}">
    <img src="../images/integration/FastLeft.jpg"/>
  </a>
  <a href="{2}">
    <img src="../images/integration/SlowLeft.jpg"/>
  </a>
  | Page {5} of {6} |
  <a href="{3}">
    <img src="../images/integration/SlowRight.jpg"/>
  </a>
  <a href="{4}">
  <img src="../images/integration/FastRight.jpg"/>
  </a>
</span>

JSFiddle

Answer 1

正如 @Michael Cocker 所说，您将图像大小设置为基本上没有。不要这样做，可能会删除填充。如果您需要它会在悬停时移动，因此可以在悬停之前将其添加到图像中。

您提到了椭圆形，但是 border-radius 的 3px 不是很多，因此请根据需要增加。如果图像具有相同的高度和宽度，使用 50% 将得到一个圆，否则它将是一个椭圆。

.pagelinks {
  float: right;
  margin-right: 48%;
  color: #828282;
}

.pagelinks a {
  text-decoration: none;
}

.pagelinks img {
  border: 1px solid transparent;
}
.pagelinks img:hover {
  border-radius: 3px;
  border: 1px solid #828282;
}

<span class="pagelinks">
  <a href="{1}">
    <img src="http://placehold.it/30x30/fc0"/>
  </a>
  <a href="{2}">
    <img src="http://placehold.it/30x30/fc0"/>
  </a>
  | Page {5} of {6} |
  <a href="{3}">
    <img src="http://placehold.it/30x30/fc0"/>
  </a>
  <a href="{4}">
    <img src="http://placehold.it/30x30/fc0"/>
  </a>
</span>