CSS hover效果失效排查：我的鼠标悬停样式为何不生效？

问题根源 #

你设置的background-color被background-image完全覆盖了——背景图片的层级高于背景色，所以hover时的颜色变化根本显示不出来。另外还要确认你的#place-img-sentosa元素是否有高度：如果这个空div没有设置高度或内边距，它的高度会是0，鼠标根本无法触发hover事件。

解决方案 #

方案1：使用背景混合模式让颜色与图片叠加 #

修改hover状态的CSS，通过background-blend-mode让背景色和图片混合显示：

#place-img-sentosa {
    background-image: url(images/sentosa.jpg);
    background-size: cover;
    height: 200px; /* 必须设置高度，否则hover无法触发 */
}

#place-img-sentosa:hover {
    background-color: aliceblue;
    background-blend-mode: overlay; /* 可选混合模式：multiply、screen等，按需选择 */
}

方案2：用伪元素添加hover覆盖层 #

给元素添加一个透明伪元素，hover时修改伪元素的背景色和透明度，既保留图片可见性，又实现hover效果：

#place-img-sentosa {
    background-image: url(images/sentosa.jpg);
    background-size: cover;
    height: 200px;
    position: relative; /* 让伪元素相对当前元素定位 */
}

#place-img-sentosa::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: background-color 0.3s; /* 可选：添加平滑过渡动画 */
}

#place-img-sentosa:hover::after {
    background-color: aliceblue;
    opacity: 0.5; /* 调整透明度，避免完全遮挡图片 */
}

方案3：确保元素有可触发hover的高度 #

如果你的元素是空div，一定要给它设置高度或者内边距，比如：

#place-img-sentosa {
    background-image: url(images/sentosa.jpg);
    background-size: cover;
    min-height: 300px; /* 或者用padding-top按比例设置高度，比如padding-top: 60% */
}

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