鼠标悬停时Transform Scale不生效：.servNavItemWrap img缩放问题求助

嘿，我一眼就发现问题所在啦！你的CSS hover选择器写法有误，导致缩放效果根本匹配不到目标元素。

错误原因 #

你写的hover选择器是：

.servNavItemWrap:hover .servNavItemWrap img

这个选择器的意思是：当.servNavItemWrap被悬停时，查找它内部另一个.servNavItemWrap下的img元素。但你的DOM结构里，img是直接放在.servNavItemWrap内部的，没有嵌套同名的父元素，所以这个选择器完全找不到目标，样式自然不会生效。

修正后的代码 #

把hover选择器里重复的.servNavItemWrap去掉，直接指定内部的img即可，同时加上transform: scale()属性实现缩放效果：

.servNavItemWrap {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    margin-bottom: 50px;
    text-align: center;
    cursor: pointer;
}
.servNavItemWrap img {
    width: 75px;
    height: 75px;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
/* 修正后的hover样式 */
.servNavItemWrap:hover img {
    -webkit-transform: scale(1.2); /* 兼容webkit内核浏览器 */
    transform: scale(1.2); /* 缩放至原大小的1.2倍，可按需调整数值 */
}

额外说明 #

• 过渡属性已经在img的基础样式里定义过了，hover状态下不需要重复写transition，除非你想改变过渡的时长或曲线。
• scale()里的数值可以根据需求调整，1是原大小，大于1放大，小于1缩小。

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