CSS hover事件动画失效求助：悬停无法触发联动缩放动画

核心问题1：CSS选择器无效 #

你的.imageholder:hover .textholder选择器是在寻找imageholder内部的textholder元素，但实际结构中两者是container的同级子元素，这个选择器无法匹配到目标，导致动画完全不生效。

核心问题2：transform属性被覆盖 #

你连续写了两个transform属性，CSS中同名属性会被后面的覆盖，所以translatey(100%)不会生效，需要合并成一个transform声明。

修复后的完整代码 #

HTML（结构不变，补充必要内容） #

<div class="container">
    <div class="imageholder"><img src="你的图片地址" alt="示例图片"></div>
    <div class="textholder">示例文本</div>
</div>

CSS #

/* 基础样式：给元素统一添加过渡，避免动画突兀 */
.imageholder, .textholder {
    transition: .5s ease;
}

/* hover imageholder时，自身执行缩放动画 */
.imageholder:hover {
    transform: scale(1.1);
}

/* hover imageholder时，同级的textholder同时执行位移+缩放 */
.imageholder:hover + .textholder {
    transform: translateY(100%) scale(1.1);
}

补充说明 #

• 如果textholder不是紧挨着imageholder的同级元素（中间有其他元素），可以用通用兄弟选择器.imageholder:hover ~ .textholder替代相邻兄弟选择器+。
• 若希望hover整个container时触发两者动画，可改用.container:hover .imageholder和.container:hover .textholder选择器。

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