Html 如何仅在将按钮悬停在图片上时将其显示？

我试图从网站上复制一些CSS，特别是包含每一篇文章的图片、标题、作者、作者页面链接和文章链接的瓷砖

以下是一个互动程序的HTML：

<div class="block-module">

<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
    <span class="button">View Story</span>
</a>

<img src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">

<div class="block-about">
    <h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
    <span class="block-stats">
    by <a href="http://flink.to/Andrew.Epstein" class="author-link">Andrew Epstein</a>
    </span>
</div>

</div>

.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }

一切正常，只是我们无法访问文章和“查看故事”链接，只有当我们将图片悬停在图片中间/中间时，该链接才会显示

编辑：这里有一个演示：

---

由于网站的Flink.to的CSS表单非常复杂，我没有找到解决方法。您能帮助我吗？

通过查看css，使用

z-index

属性和属性隐藏和显示元素。尝试以下代码，我使用不同的

z-index

值来重叠元素。请记住，

z-index

属性仅对具有

position:absolute

、

position:relative

或

position:fixed

的元素有效，因此您必须记住这一点。我还向

img

添加了一个id，以便在css上选择它

HTML

---

有很多CSS，显然很难说什么是什么，它需要被裁剪。但从我所能看出的，正是这些风格促成了这一切。按钮不透明度最初为0（隐藏），因此需要更改为1

我添加这个样式是为了让它显示在光标上

.view-full-module.mod-custom-icon:hover .button.view-full-custom-el {
    opacity: 1;
}

---

此按钮的CSS在CSS表中引用了至少30或40个类。我试图找到好的CSS片段，但我最终设法使其在CSS中使用了100多行。我能理解你的答案，但如果我在这里，那是因为我被卡住了…非常感谢你的帮助，但事实上，无法访问文章链接，悬停时按钮会闪烁。不客气，这只是一个例子，我希望它能帮助你。使用这种方法，您还必须为其他元素（如文章链接或其容器）设置z索引。谢谢，这是一个很大的帮助！

.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }

.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }

.block-about a { position:relative; z-index:5; }

.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }

.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }

.button { color:#ffffff; background-color:#337d94; }

.author-link { color:#659dae; }

.article-link {
  position:absolute;
  left:110px;
  top: 120px;
  z-index:-1;
}
.albumImage{
  position:absolute;
  z-index:0;
}
.albumImage:hover{
  z-index:-2;
}

.view-full-module.mod-custom-icon:hover .button.view-full-custom-el {
    opacity: 1;
}