鼠标悬停叠加

Question

我有一个随按钮一起出现的覆盖效果，我用不透明性进行覆盖，因此按钮也继承了它，但是我需要按钮的背景不透明。我试图用背景色rgba替换不透明度，但是我不能这样做，因为覆盖上的按钮变得可见。 我也尝试使用onmouseover事件使用脚本来执行此操作，但是当我在第二个div上进行鼠标悬停时，覆盖仍然显示在第一个div上。

<div class="elements">
  <div class="sections" onmouseover="document.getElementById('overlay').style.display='block'" onmouseout="document.getElementById('overlay').style.display='none';">
    <div id="overlay">
      <input type="button" value="this" class="btn" name="ovrl" />
    </div>
    <div class="cntnt">Some content</div>
  </div>

  <div class="sections" onmouseover="document.getElementById('overlay').style.display='block'" onmouseout="document.getElementById('overlay').style.display='none';">
    <div id="overlay">
      <input type="button" value="this" class="btn" name="ovrl" />
    </div>
    <div class="cntnt">Some content</div>
  </div>
</div>