我一直在争论如何处理包含图像的块元素的悬停事件，通过绝对定位放置在图像顶部的标题，以及应该在悬停时显示的pinterest pin按钮（在块元素）。
问题是如何在元素悬停时最好地处理叠加转换，而不会隐藏pinterest按钮。从我的片段中可以看出，我正在尝试在悬停时将不透明的黑暗背景应用于图像（但保留标题内容以便阅读）。不幸的是，我在代码段中的代码会导致在悬停隐藏pinterest按钮时应用背景。
我还希望当标题悬停在屏幕上时，它会显示pinterest pin按钮 - 当前，如果从我的片段中删除背景过渡，您可以看到仅在直接悬停在图像上时出现pinterest按钮 - 标题位于堆栈中的图像顶部，当您将鼠标悬停在标题上时，隐藏了pinterest按钮。
html结构很简单，如下所示：
<div class="item">
<a href="#">
<div class="featured-image">
<img src="https://farm8.staticflickr.com/7027/6851755809_df5b2051c9_z.jpg">
</div>
<div class="caption">
<h4>Blurb</h4>
<span class="button">Read More</span>
</div>
</a>
</div>
<script async defer data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>