如何实现图片上方文字淡入的hover效果？现有代码无法生效求原因排查

代码存在的问题 #

• 语法错误：.text的color属性值多写了一个#，错误写法##15BBFF会导致颜色属性失效
• 选择器匹配错误：.imagine:hover .text是匹配.imagine内部的.text子元素，而你的DOM结构中.text和.imagine是同级节点，共同挂载在.imagine-pozitie下，因此该选择器永远不会生效
• 结构逻辑问题：当前所有图片共用同一个绝对定位的文字层，触发hover后文字会覆盖全部三张图片，如果你需要单张图片hover时仅在对应图片上方显示文字，需要调整HTML结构，给每张图片单独配一个文字容器和相对定位父级

修正方案 #

方案1：保留原结构，hover整个容器区域显示文字

修正后的CSS代码

.imagine{
    height: 300px;
    width: 300px;
    margin: 50px;
    border-radius: 50%;
}
.text{
    font-family: Oswald;
    font-weight: bold;
    font-size: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    background:#00628B ;
    color: #15BBFF; /* 去掉多余的# */
    opacity:0;
    transition:1s;
    /* 可选：添加flex布局让文字垂直水平居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* 改为父容器hover时触发文字显示 */
.imagine-pozitie:hover .text{
    opacity: 1;
}
.imagine-pozitie{
    position: relative;
    display: inline-block;
    text-align: center;
}

方案2：实现单张图片hover显示对应位置文字

调整后的HTML代码

<div class="imagine-pozitie">
  <!-- 每张图片单独包一个容器 -->
  <div class="img-item">
    <div class="text">
      O ORA
      <div>50 DE LEI</div>
    </div>
    <img class="imagine" src="poze_site/rec.png" alt="">
  </div>
  <div class="img-item">
    <div class="text">
      O ORA
      <div>50 DE LEI</div>
    </div>
    <img class="imagine" src="poze_site/rec.png" alt="">
  </div>
  <div class="img-item">
    <div class="text">
      O ORA
      <div>50 DE LEI</div>
    </div>
    <img class="imagine" src="poze_site/rec.png" alt="">
  </div>
</div>

配套CSS代码

.imagine{
    height: 300px;
    width: 300px;
    border-radius: 50%;
}
/* 单图容器加相对定位，间距移到这里 */
.img-item{
    position: relative;
    display: inline-block;
    margin: 50px;
}
.text{
    font-family: Oswald;
    font-weight: bold;
    font-size: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    background:#00628B ;
    color: #15BBFF;
    opacity:0;
    transition:1s;
    border-radius: 50%; /* 文字层加圆角和圆形图片匹配 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* 单图容器hover时显示对应文字 */
.img-item:hover .text{
    opacity: 1;
}
.imagine-pozitie{
    display: inline-block;
    text-align: center;
}

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