CSS hover触发flex容器子元素悬停显示效果失效问题求助

开发过程中遇到CSS效果实现问题：需要制作带双重动画效果的勾选按钮，当前正在实现鼠标悬停时按钮从右侧出现的交互，原方案使用flexbox搭配hover特性实现，但编写的代码未达到预期效果。

• 伪类语法错误：:hover伪类中间不能加空格，原代码写为: hover属于无效语法，无法触发悬停逻辑
• 选择器逻辑错误：+是相邻兄弟选择器，仅匹配目标元素后紧邻的同级元素，而.flexbox-3是.flexbox-container的子元素，不属于同级节点，选择器无法命中目标
• 类选择器语法错误：类选择器必须以.开头，原代码中flexbox-3未加前缀.，会被识别为自定义标签选择器，无法匹配对应class的元素
• 动画实现逻辑错误：直接使用display: none/display: block切换显隐是瞬时生效的，无法产生平滑过渡动画，不符合滑入效果的需求

CSS代码 #

.flexbox-container {
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;
  /* 测试用样式，可根据需求调整 */
  width: 320px;
  padding: 10px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.flexbox-3 {
  /* 初始隐藏状态：位移到右侧、透明、宽度为0 */
  opacity: 0;
  width: 0;
  transform: translateX(16px);
  /* 配置过渡动画 */
  transition: all 0.25s ease;
  overflow: hidden;
  white-space: nowrap;
}

/* 正确选择器：悬停容器时选中内部的flexbox-3元素 */
.flexbox-container:hover .flexbox-3 {
  opacity: 1;
  width: auto;
  transform: translateX(0);
}

HTML代码 #

<div class="flexbox-container">
  <div class="flexbox-1">
    <p>文本内容1</p>
  </div>
  <div class="flexbox-2">
    <p>文本内容2</p>
  </div>
  <div class="flexbox-3">
    <p>勾选按钮</p>
  </div>
</div>

• 如果要实现双重动画效果，可以在按钮滑入后，给内部的勾选图标单独设置缩放/描边动画，通过transition-delay设置延迟，等按钮滑入完成后再触发图标动画即可
• 所有需要平滑过渡的属性不要和display切换搭配使用，display的变化不会被过渡动画捕获

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