React中父元素opacity为0.7时如何设置单个子div透明度为1

问题根因 #

CSS 中opacity属性会触发新的堆叠上下文，当父元素设置的opacity值小于1时，所有子元素的渲染都会被约束在这个透明度层级下，子元素即便单独设置opacity: 1，最终渲染透明度也不会超过父元素的opacity值，这是CSS标准规定的原生渲染逻辑，并非代码逻辑错误。

解决方案 #

优先推荐不需要改动组件DOM结构的纯CSS调整方案，把原来作用在父元素上的全局opacity下沉到子元素单独控制，即可让激活状态的按钮突破透明度限制：

方案1：拆分全局透明度到子元素控制（保留原有交互效果） #

你原来的逻辑是给父nav加opacity控制整个导航的显隐和透明度，只需要把这个透明度规则拆分到导航内的各个子元素（汉堡图标、各个bubble按钮）上单独设置，再给激活状态的bubble写更高优先级的透明度规则即可，修改后的CSS代码如下：

nav {
  width: 6rem;
  position: sticky;
  top: 0;
  align-self: flex-end;
  z-index: 5;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.2rem;
}

/* 移除父元素全局opacity，保留过渡效果 */
.bubbs {
  transition: all 400ms ease-in;
}

/* 所有子元素默认隐藏 */
.bubbs > svg,
.bubbs .bubble {
  opacity: 0;
  transition: all 400ms ease-in;
}

.bubbs > svg {
  color: white;
  font-size: 1.8rem;
  margin-bottom: .5rem;
}

/* 导航激活状态下，子元素默认透明度0.7 */
.bubbs-enter > svg,
.bubbs-enter .bubble {
  opacity: .7;
}

/* 导航hover时，所有子元素透明度拉满 */
.bubbs-enter:hover{
  border-left: 1px solid rgba(82, 82, 82, 0.246)
}
.bubbs-enter:hover > svg,
.bubbs-enter:hover .bubble {
  opacity: 1;
}

.bubble {
  aspect-ratio: 1;
  border: 1px solid rgba(74, 74, 74, 0.216);
  width: 3.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: .5rem 0;
  backdrop-filter: blur(2px);
  cursor: pointer;
  background-color: rgba(28, 28, 28, 0.349);
  transition: all ease 350ms;
}

.bubble:hover {
  transform: scale(1.06);
}

.bubble p {
  color: rgb(240, 240, 240);
  margin: 0;
  font-size: 1.3rem;
  text-transform: capitalize;
  transition: all ease 550ms;
}

/* 激活状态的bubble透明度设为1，优先级高于默认的0.7，可正常生效 */
.bubble-active {
  background-color: rgb(255, 255, 255);
  transform: scale(1.06);
  opacity: 1 !important;
}

.bubble-active > p {
  color: red;
}

这个方案完全保留你原有的显隐动画、hover交互效果，不需要修改React组件代码，只调整CSS作用目标即可。

方案2：仅控制背景透明度（适合不需要整体半透明的场景） #

如果你给父nav设置opacity:0.7只是为了实现半透明背景，不需要让图标、按钮也跟着半透明，可以直接去掉父元素的opacity属性，改用带alpha通道的背景色实现半透明效果：

.bubbs {
  opacity: 1;
  background-color: transparent;
  transition: background-color 400ms ease-in;
}
.bubbs-enter {
  background-color: rgba(0, 0, 0, 0.7); /* 仅背景透明度0.7，子元素默认完全不透明 */
}

这种写法下子元素本身就是完全不透明的，.bubble-active的样式不需要额外调整就能正常显示。

不推荐方案 #

不建议通过将激活bubble设置为position: fixed、抬升z-index的方式脱离父元素堆叠上下文，这种写法会破坏原有布局流，sticky导航滚动时容易出现定位错位问题，维护成本极高。

内容的提问来源于stack exchange，提问作者Ben_Sven_Ten