html - 链接到 url 的图像绝对位置

Question

我试图将图像放在页面的绝对位置，然后将图像链接到外部 URL。图像绝对位置工作正常。但是当我将鼠标悬停在图像上或单击它时，该链接不会出现。知道我做错了什么吗？

这是我的代码:

.front-page-img1 img {
  position: absolute;
  left: 10px;
  top: 340px;
  margin-left: -30px;
  margin-top: -10px;
}

<div class="front-page-img1">
  <a href="http://www.mywebsite.com">
    <img src="http://www.lorempixel.com/500/500">
  </a>
</div>

Answer 1

你移动的只是图像而不是 anchor 标签，所以这就是为什么当你将鼠标悬停在图像上时，你只是将鼠标悬停在图像上而不是 anchor 标签上，所以这就是悬停的变化不受影响的原因

移动整个div而不仅仅是图像，然后你可以看到变化

检查片段

.front-page-img1 {
  position: absolute;
  left: 10px;
  top: 140px;
  margin-left: -30px;
  margin-top: -10px;
}
a {
  border: 1px solid;
  width: 100%;
  display: inline-block;
}
.front-page-img1 a:hover {
  border: 20px solid red;
}

<div class="front-page-img1">
  <a href="http://www.google.com" target="_blank">
    <img src="http://www.lorempixel.com/500/500">
  </a>
</div>

希望对你有帮助