Question

我有一个div，其宽度应适合内容。然后，我想在整个div上添加一个叠加层（将出现在悬停时），但是要做到这一点，我需要获取父div的宽度。如果父级具有width：fit-content，如何设置子级div的宽度以匹配父级的宽度？而且我不想以px形式写入值，因为内容可能会发生变化。

<div class="b-group">
 <button type="button" class="btn nohover btn-circle btn-xl btn-success">
   <img src="favicon.ico" alt="">
 </button>
 <button type="button" class="btn btn-extensive ">HI</button>
 <div class="overlay"></div>
</div>

.b-group{
  width: fit-content;
  height: fit-content;
}
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  transition: 0.5s;
  width: 100%;
  height: 100%;
}
.b-group:hover .overlay{
  opacity: 1;
}

以上是我现在所拥有的。 width：.overlay中的100％会将父级扩展到100％，但不应这样做。它的宽度应与b-group相同

如果父div具有widht：fit-content，如何使子div与父div的宽度匹配？

0 个答案: