悬停图片div时遮罩opacity导致按钮变透明问题解决

opacity 属性会对元素及所有子元素生效，让整个元素树共用同一个透明度上下文，哪怕给内部按钮单独设置opacity: 1，也无法突破父元素的透明度限制，这就是按钮跟着变半透明的核心原因。你之前尝试的display、visibility属性是控制元素显隐状态的，和透明度继承问题无关，自然不会生效。

不要给遮罩层设置整体opacity，改用带alpha透明度通道的背景色实现半透明遮罩效果，半透明只会作用在遮罩层的背景上，完全不会影响内部的按钮元素。

修正后的代码 #

CSS部分 #

.promo__girl {
  background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/r0rnSP0/1.png');
  position: absolute;
  width: 300px;
  height: 300px;
  margin-top: 136px;
  right: 7.469rem;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.promo__girl-image {
  width: 100%;
}

.promo__girl-hover {
  width: 300px;
  height: 300px;
  border-radius: 10px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 过渡加在默认状态，鼠标移出也会有平滑过渡效果 */
  transition: background-color 0.5s;
}

.promo__girl .button_yellow {
  font-size: 16px;
  color: #162E3C;
  background-color: #DDF0A7;
  border: 2px solid #DDF0A7;
  text-align: center;
  margin-top: 10px;
  border-radius: 64px;
  margin-right: 4px;
  height: 52px;
  width: 233px;
  z-index: 1;
  cursor: pointer;
}

.promo__girl .button_yellow:hover {
  background-color: transparent;
  color: white;
  border-color: white;
}

.promo__girl-hover:hover {
  /* 移除opacity属性，改用rgba实现仅背景半透明 */
  background-color: rgba(0, 0, 0, 0.7);
}

HTML部分（无需修改，保持原有结构即可） #

<div class="promo__girl">
  <div class="promo__girl-hover"><button class="button_yellow">Watch Introduction</button></div>
</div>

• 鼠标悬停在图片区域时，黑色半透明遮罩平滑出现，内部按钮保持完全不透明的初始状态
• 鼠标悬停在按钮上时，按钮自动切换为白边白字透明背景的样式，符合交互预期
• 鼠标移出时，遮罩和按钮样式都会平滑过渡回初始状态

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