CSS卡片悬停效果异常：全局悬停时仅标题动画生效 图片效果未触发

问题原因 #

你当前为图片设置的悬停效果绑定的是图片自身的hover事件，选择器写为.card__image:hover，仅当鼠标悬停在图片区域时才会触发效果。当鼠标悬停在卡片下方的文本区域时，仅触发了卡片容器的hover事件，不会触发图片自身的hover事件，因此图片效果不生效。

修复方案 #

参考你给标题写的悬停效果逻辑，将CSS中图片的hover选择器修改为绑定卡片容器的hover状态即可，修改后的代码如下：

/* 替换原有 .card__image:hover 规则 */
.card:hover .card__image {
  filter: grayscale(0%);
  transform: scale(1.05);
}

修改后只要鼠标悬停在卡片任意区域，就会同时触发标题的伪元素缩放效果和图片的灰度调整、缩放效果，而Read more链接的效果依然只有悬停在链接自身时才触发，完全符合需求。

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