jquery - 如何使用包装器 div 更改不透明度为 1 的内部 div 的颜色

Question

如何使用包装器 div 更改不透明度为 1 的内部 div 的颜色？

如果不透明度为 0，我可以使用背景颜色来实现这一点，但是一旦不透明度设置为 1，它就不起作用了。我理解它为什么会发生，但不知道如何解决它。

<div id="div2" style="height:100px;width:100px;border:1px solid #ccc">
  <div id= "div1"  style="height:100px;width:100px;border:1px solid #ccc; background-color:rgba(255, 255, 255,1) "></div>
</div>

$("#div2").css("background-color", 'rgba(235, 235, 228,1)')

我无法控制不透明度为 1 的内部 div，但我想在需要时为内部 div 提供此 (rgb(235, 235, 228)) 颜色（禁用外观）。我试图用一个包装器来实现。

标签： jqueryhtmlcss

Answer 1

为什么需要包装器？只需将其用于要禁用的 div：

<div id="div1"  style="height:100px;width:100px;border:1px solid #ccc; background-color:rgba(255, 255, 255,1) "></div>

$("#div1").css({
    "background-color", 'rgba(235, 235, 228)',
    "pointer-events", "none"
 });

更新

$('.disable').on('click', function(){
     $("#div1").addClass("disabled-control");
});

$('.enable').on('click', function(){
     $("#div1").removeClass("disabled-control");
});

.disabled-control {
    background-color : rgba(235, 235, 228) !important;
    pointer-events : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="div2" style="height:100px;width:100px;border:1px solid #ccc">
  <div id= "div1"  style="height:100px;width:100px;border:1px solid #ccc; background-color:rgba(255, 255, 255,1) "></div>
</div>

<br><br>
<button class="disable">Disable</button>   <button class="enable">Enable</button>