孩子的！important被父母的属性忽略

Question

我的父母有一个可单击的类，它将悬停时的不透明度更改为0.5，但是我的问题是我希望我的孩子（工具提示）具有不透明度1。甚至我的！important也被忽略了，我无法解决这个问题

这并不是真正的重复，因为我无法使用背景不透明度修复样式。

const username = document.getElementById('username');

username.addEventListener('mouseenter', function() {
    username.classList.toggle('tooltip');
});

username.addEventListener('mouseleave', function() {
    username.classList.toggle('tooltip');
});

.clickable {
  cursor: pointer;
}
.clickable:hover {
  opacity: 0.5;
}

.tooltip:after {
  content: 'Tooltip';
  position: absolute;
  background-color: lightblue;
  transition: linear 0.1s;
  top: 30px;
  left: 20px;
  padding: 8px;
  opacity: 1 !important;
}

<div class="clickable">
  <span id="username">Username</span>
</div>