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

Question

我正在尝试制作一个通用的悬停叠加层，以可视方式指示用户何时将鼠标悬停在某物上。

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

原始发行

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

 .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 ）解决此问题：

 .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> 

这就是问题所在。 如果我在父div上保留max-width: fit-content ，无论我做什么，我都无法让子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 。

Answer 1

这可能对您有用。

 .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>