CSS设置opacity实现鼠标悬停div显示item-controls图标不生效求助

问题根因 #

你的代码存在两个核心错误导致悬停效果不生效：

• CSS选择器嵌套逻辑错误：你当前的预处理器（Sass/LESS）写法最终生成的CSS选择器为 .new-tasks .item-controls .item-controls:hover，但你的DOM结构中不存在两层.item-controls类的嵌套元素，因此永远无法匹配到对应元素触发样式修改。
• 悬停触发对象逻辑错误：你给.item-controls本身设置了opacity:0，完全透明的元素无法被鼠标检测到，因此不可能触发自身的:hover伪类。

修复方案 #

绝大多数待办场景的交互是悬停在整个任务项（即带.new-tasks类的外层容器）时显示操作图标，按以下写法修改CSS即可：

/* 初始状态操作图标全透明 */
.new-tasks .item-controls {
  opacity: 0;
  /* 可选：加过渡动画让效果更丝滑 */
  transition: opacity 0.2s ease;
}
/* 悬停在任务项时，子元素的操作图标变为不透明 */
.new-tasks:hover .item-controls {
  opacity: 1;
}

如果你需要用display属性实现，写法逻辑一致：

.new-tasks .item-controls {
  display: none;
}
.new-tasks:hover .item-controls {
  display: block;
}

opacity的优势是支持过渡动画、不会改变页面布局；display的优势是隐藏时完全不占用页面空间，可根据需求选择。

补充注意事项 #

• 确认你动态生成任务项时，给每个任务的外层容器正确添加了.new-tasks类，保证.item-controls是.new-tasks的子元素，选择器才能匹配生效。
• 你JS代码中创建的自定义元素done-button、del-button需要额外设置宽高、图标或文本内容，否则即使图标容器显示，也会因为没有内容看不到效果。

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