html - 如何将跨度的不透明度更改为比父级悬停时更高的值？

Question

我想做“世界！” 悬停时以 100% 的不透明度显示。但它不起作用。但是，如果您交换这两个数字并使 .header=1 和 .world:hover=0.5 的不透明度，则代码可以工作。因此 :hover 在尝试降低不透明度时有效，但在尝试增加不透明度时无效。这是否意味着孩子的 100% 不透明度等于父母指定的不透明度？有什么办法可以解决吗？

.header {
  opacity: 0.5;
}

.world:hover {
  opacity: 1;
}

<div class="header">
  <h1>Hello <span class="world">World!</span></h1>
</div>

标签： htmlcss

Answer 1

而不是使用opacity，使用color和rgba：

.header {
  color: rgba(0, 0, 0, 0.5);
}

.world:hover {
  color: rgba(0, 0, 0, 1);
}

<div class="header">
  <h1>Hello <span class="world">World!</span></h1>
</div>