如何在 HTML+CSS 中制作一个既适合内容又可以扩展的悬停叠加层?

我正在尝试制作一个通用的悬停叠加层，该覆盖层直观地指示用户何时将鼠标悬停在某物上。

请注意，我强烈建议运行所有内联代码片段，以便更容易理解我想要实现的目标！

原始问题

以下片段是我开始的。它适用于我的大多数用例，但是当有一个单独的元素时，覆盖层太宽了。

.buttonized-hover-overlay:hover {
  opacity: 100 !important;
}

<h2>
this is how it was before. when i hover, the hovered overlay is too wide
</h2>
<div style="position: relative;">
  <div class="buttonized-hover-overlay"
       style="opacity: 0; top: 0px; bottom: 0px; right: 0px; left: 0px; position: absolute; background-color: rgba(0.4, 0.48, 0.71, 0.6);">
    &nbsp;
  </div>
  <button>
    asdf
  </button>
</div>

尝试的解决方案

然后，我通过在父div上添加一个max-width: fit-content(适用于Chrome，我需要-moz-fit-content Firefox(来解决此问题：

.buttonized-hover-overlay:hover {
  opacity: 100 !important;
}

<h2>
  so i added a fit-content to the parent div. now the hovered part fits what's inside.
</h2>
<div style="position: relative; max-width: fit-content;">
  <div class="buttonized-hover-overlay" style="opacity: 0; top: 0px; bottom: 0px; right: 0px; left: 0px; position: absolute; background-color: rgba(0.4, 0.48, 0.71, 0.6);">
    &nbsp;
  </div>
  <button>
    asdf
  </button>
</div>

这大多有效，但是...如果我想让按钮占据整个宽度怎么办？

有时，我真正想要的是内部内容占据所有可用的宽度。我将暂时还原父级中的max-width: fit-content;，并展示我希望内部内容在某些情况下的外观：

.buttonized-hover-overlay:hover {
  opacity: 100 !important;
}

<h2>
     if we remove the <code>max-width: fit-content;</code> from the parent, the inner content can fill up the available horizontal space. THIS IS WHAT I WANT. but as you can see from the example below, reapplying will <code>max-width: fit-content;</code> (or `display: inline-block`) prevent the button from taking up all the available space.
    </h2>
    <div style="position: relative;">
      <div class="buttonized-hover-overlay"
           style="opacity: 0; top: 0px; bottom: 0px; right: 0px; left: 0px; position: absolute; background-color: rgba(0.4, 0.48, 0.71, 0.6);">
        &nbsp;
      </div>
      <button style="display: block; width: 100%; max-width: 100%;">
        asdf
      </button>
  </div>

所以问题来了。如果我将max-width: fit-content留在父div 上，无论我尝试什么，我都无法让子div 占用剩余空间。

.buttonized-hover-overlay:hover {
  opacity: 100 !important;
}

<h2>
  tried setting both the width and max-width of the child, but it is still getting constrained by the <code>max-width: fit-content;</code> on the parent, for some reason
</h2>
<div style="position: relative; max-width: fit-content;">
  <div class="buttonized-hover-overlay" style="opacity: 0; top: 0px; bottom: 0px; right: 0px; left: 0px; position: absolute; background-color: rgba(0.4, 0.48, 0.71, 0.6);">
    &nbsp;
  </div>
  <button style="display: block; width: 100%; max-width: 100%;">
      asdf
  </button>
</div>

我尝试将孩子的width和max-width都设置为100%，但由于某种原因，这些不会占用所有可用的水平空间。我怎样才能实现我想要做的事情？我能简洁地说的唯一方法是：

如何在 HTML+CSS 中制作一个既适合内容又可以扩展的悬停叠加层？

愿意让悬停效果以不同的方式工作。我不能只设置背景颜色，因为它必须与任何元素一起使用，包括图像和可能具有一种或多种背景颜色的元素。

编辑：为任何想要使用它的人添加一个JSFiddle。

.buttonized-hover-overlay:hover {
  opacity: 100 !important;
}

<div style="position: relative;     display: inline-block;">
  <div class="buttonized-hover-overlay" 
  style="opacity: 0; 
  top: 0px; 
  bottom: 0px; 
  right: 0px; 
  left: 0px; 
  position: absolute; 
  background-color: rgba(0.4, 0.48, 0.71, 0.6);">
  </div>
  <button>
      long content in button
  </button>
</div>