如何为悬停元素及其工具提示设置单独的不透明度？

Question

我正在尝试为悬停在矩形遮罩上的鼠标和悬停时也出现的工具提示设置不同的不透明度级别。

但我失败了。我目前有这个代码：

<style>

.tooltiptext {
      visibility: hidden;
      background-color: #336699;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 5px 0 5px;
      width: 300px;
      opacity: 1 !important;


  /* Position the tooltip */
       position: absolute;
       z-index: 1000;
       top: -5px;
       left: 105%;
}

.asamblea {
       position: absolute;
       left: 505px;
       top: 41px;
       height: 60px;
       width: 160px;
       z-index: 1000;
       opacity:0.5;
    }

.asamblea:hover {
       background-color: #39e600;
}

.asamblea:hover .tooltiptext {
       visibility: visible;
       opacity: 1 !important;
}

</style>

    <div class="asamblea">
         <span class="tooltiptext">some text</span>
    </div>

如何独立设置它们的不透明度？

Answer 1

我倾向于避免使用 opacity:val，因为它适用于元素的每个部分 AND 所有子元素。

对于您的情况，您有几种选择：

从不透明度发生变化的元素中删除工具提示
在悬停元素内添加一个包装器，仅更改该元素及其子元素的不透明度。
通过在背景、边框等上使用 rgba (alpha) 模拟不透明度，但您必须分别更改每个属性。

如何为悬停元素及其工具提示设置单独的不透明度？

How to set separate opacity for hover element and its tooltip?

css

opacity