Question

我希望this effect为我的形象。

我实现了它，但是我已经停在了图形的位置，当我将鼠标悬停在图像上时，我应该能够点击它并且它应该重定向。我们会实现吗？

我将以下代码用于悬停效果：

.tint {
  position: relative;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
}

.tint:before {
  content: "";
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: none;
  transition: all .3s linear;
}

.tint:hover:before { background: rgba(0,0,255, 0.5); }

如果我删除position:absolute，则链接开始工作，但悬停效果消失。

如果有人对此有任何解决方案，请帮助我。

提前致谢。

Answer 1

您可以尝试使用此代码的含义：

<div>
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
<div class="mask">
</div>
</div>


<style>
    .mask {  position: absolute;
      height: 100%;
      width: 100%;
      transition: all 0.6s ease;
      left: 0;
      top: 0;
      background-color: #0af;
      opacity: 0;
    }
    .mask:hover {
      background-color: #0af;
      opacity: 0.3;
    }
</style>

带有锚标记的悬停效果图像不起作用

1 个答案: