时间戳

首页 > 解决方案 > 如何为悬停元素及其工具提示设置单独的不透明度？

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

问题描述

我正在尝试为悬停在矩形蒙版上设置不同的不透明度级别，以及在悬停时出现的工具提示。

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

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

我怎样才能将它们的不透明度设置为彼此独立？

标签： cssopacity

解决方案

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

在您的情况下，您有几个选择：

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

推荐阅读