CSS问题：鼠标悬停时li元素背景渐变过渡效果失效

问题原因 #

CSS过渡（transition）无法直接对背景图像（包括线性渐变）的有无/切换进行过渡计算——因为渐变本质是背景图像，从无背景到有渐变，浏览器找不到中间过渡状态。而box-shadow是单一数值属性，能直接计算过渡过程，所以可以正常生效。

解决方案 #

这里提供两种简单可行的实现方式：

方式一：伪元素+opacity过渡

给li添加绝对定位的伪元素承载渐变背景，默认隐藏（opacity:0），hover时通过改变opacity显示，过渡这个属性即可实现平滑效果。

修改后的CSS代码：

.mfp-con ul {
    list-style: none;
    padding: 0;
}

.mfp-con ul li {
    position: relative; /* 为伪元素提供定位基准 */
    z-index: 1; /* 确保文字在渐变上方 */
    -moz-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

/* 用伪元素承载渐变背景 */
.mfp-con ul li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.363), transparent 30%);
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.5s ease-in-out; /* 过渡opacity */
    z-index: -1; /* 放在文字下方 */
}

.mfp-con ul li:hover::before {
    opacity: 1; /* hover时显示渐变 */
}

/* 原有其他样式保持不变 */
.mfp-con {
    display: flex;
    flex-direction: column;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: rgb(73, 40, 221);
    width: 100%;
}

.mfp-con ul {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
}

.mfp-con ul > * {
    padding: 8px 10px;
    margin: 0px 2px;
    color: white;
    font-size: 1rem;
    font-family: Lato, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    cursor: pointer;
}

方式二：background-size过渡

给li设置初始不可见的渐变背景（高度为0），hover时修改background-size让渐变显示，过渡这个属性实现平滑效果。

修改后的CSS代码：

.mfp-con ul {
    list-style: none;
    padding: 0;
}

.mfp-con ul li {
    /* 初始渐变高度为0，不可见 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.363), transparent 30%) bottom / 100% 0%;
    background-repeat: no-repeat;
    -moz-transition: background-size 0.5s ease-in-out;
    -webkit-transition: background-size 0.5s ease-in-out;
    -o-transition: background-size 0.5s ease-in-out;
    transition: background-size 0.5s ease-in-out;
}

.mfp-con ul li:hover {
    /* hover时渐变高度变为100%，显示出来 */
    background-size: 100% 100%;
}

/* 原有其他样式保持不变 */
.mfp-con {
    display: flex;
    flex-direction: column;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: rgb(73, 40, 221);
    width: 100%;
}

.mfp-con ul {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
}

.mfp-con ul > * {
    padding: 8px 10px;
    margin: 0px 2px;
    color: white;
    font-size: 1rem;
    font-family: Lato, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    cursor: pointer;
}

说明 #

• 伪元素方法灵活性更高，后续调整渐变样式或叠加其他效果更方便；
• background-size方法代码更简洁，适合简单的渐变过渡场景。

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