jquery - 如何在悬停时显示图像之上的图像

Question

我知道这个问题可能已经被回答过几次了。但我需要一个适用于任何图像的解决方案。

我有一个包含 4 张图像的作品集。所以它显示图像，我想在悬停时显示 Github Logo 的图像。

我已经找到了:

a:hover:before {
  content: '';
  display: block;
  background: rgba(255, 0, 0, .5); /* your background */
  width: 500px;
  height: 500px; 
  position: absolute;
  top: 0;
  right: 0;
}

但它需要宽度和高度。我的图像没有相同的高度，因此我需要一个 css/jQuery/Angular 代码来适合悬停的图像。

谢谢!

Answer 1

试试这个，它总是会覆盖它的父级。您可以编辑背景位置以满足您的需要。

a:hover:before {
      content: '';
      display: block;
      background: url('img-path.png') no-repeat;
      background-position: right bottom;
      width: 100%;
      height: 100%; 
      position: absolute;
      top: 0;
      right: 0;
    }

编辑:悬停的 a 标签应使用 position:relative;