CSS悬停动画异常：图片切换时底层图片无法消失求助

问题根源分析 #

你的代码存在三个核心问题：

• HTML拼写错误：<img calss="mwhite">里的calss是笔误，应该是class，这直接导致.mwhite的CSS样式完全不生效。
• hover触发逻辑错误：分别给两张图片绑定hover事件，当.mwhite透明度变为0后，鼠标会直接落到下层的.mblack上，此时.mwhite的hover状态会立即丢失，导致动画出现跳变甚至卡住。
• 定位上下文缺失：.mnovly设置了position: absolute，但父容器.mnpic没有设置position: relative，导致绝对定位的元素脱离预期布局范围，两张图片无法重叠。

修正后的代码 #

HTML（修正拼写错误）

<div class="mnpic">
    <img class="mwhite" src="menuwhite.png" alt="" height="150px">
    <div class="mnovly">
        <img class="mblack" src="menublack.png" alt="" height="150px">
    </div>
</div>

CSS（调整定位与hover逻辑）

.Menu .mnpic {
    transform: translateX(30%);
    position: relative; /* 给绝对定位元素提供上下文 */
    display: inline-block; /* 让容器贴合图片尺寸 */
}

.mnovly {
    position: absolute;
    top: 0;
    left: 0; /* 确保两张图片完全重叠 */
}

.mwhite {
    opacity: 1;
    transition: opacity 0.5s ease; /* 明确指定过渡属性，避免不必要的属性过渡 */
}

.mblack {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 把hover绑定到父容器，确保鼠标在图片区域内始终触发切换 */
.mnpic:hover .mwhite {
    opacity: 0;
}

.mnpic:hover .mblack {
    opacity: 1;
}

关键改动说明 #

1. 修正HTML的calss拼写错误，确保CSS选择器能正确匹配元素。
2. 给.mnpic添加position: relative和display: inline-block，让绝对定位的.mnovly能相对于它定位，且容器尺寸贴合图片。
3. 将hover事件绑定到父容器.mnpic上，只要鼠标进入图片区域，就同时触发两张图片的透明度过渡，避免因hover状态丢失导致的动画异常。
4. 明确指定transition的属性为opacity，优化过渡性能，避免意外触发其他属性的过渡（比如你之前代码里.mblack:hover的height变化）。

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