如何用CSS实现鼠标悬停列表项时将子图片透明度设为1？

嘿，这事儿处理起来很直接，利用CSS的:hover伪类结合元素选择器就能搞定，我给你两种实用的写法，按需选就行：

基础通用写法 #

这种写法会选中li内部所有的img元素，不管嵌套层级：

/* 默认隐藏图片 */
ul li img {
  opacity: 0;
  /* 可选：添加过渡动画让显示/隐藏更顺滑 */
  transition: opacity 0.3s ease;
}

/* 鼠标悬停li时，显示其内部所有img */
ul li:hover img {
  opacity: 1;
}

精准定位直接子元素的写法 #

如果你的li里面还有其他嵌套结构，只想选中li直接包含的img元素，可以用直接子选择器>，避免影响深层嵌套的图片：

/* 默认样式不变 */
ul li img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 仅选中li的直接子元素img */
ul li:hover > img {
  opacity: 1;
}

小提示 #

加上transition属性是为了让图片的透明度变化有平滑过渡，提升用户体验，要是不需要动画效果，直接删掉那行就行~

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