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; }将获得圆圈，否则它将是椭圆形。

＆＃13;

<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>

＆＃13;

react-navigation

＆＃13;

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

1 个答案: