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

Question

I'm trying to set different opacity levels for a hover over rectangular mask and a tooltip that also appears on hover.

But I'm failing. I currently have this code:

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

How can I set their opacity independent of one another?

Answer 1

I tend to avoid opacity:val since it applies to every part of an element AND all children of the element.

In your case you have a few options:

1. Remove the tooltip from the element that gets an opacity change
2. Add a wrapper inside the hovered element and only change the opacity on that element and it's children.
3. Simulate opacity by using rgba (alpha) on backgrounds, borders, etc but you'll have to change each of those attributes separately.