jQuery Nice Select：悬停其他选项时保留选中项背景色

使用Nice Select插件时会遇到这个问题：鼠标悬停下拉列表里的非选中选项时，原本选中的选项背景色会消失。你当前的CSS代码未生效，核心原因是选择器优先级不足，被插件默认样式覆盖了。

解决方案 #

调整CSS选择器的优先级，确保选中项的样式在菜单展开状态下也能生效：

/* 确保选中项始终保留背景色 */
.nice-select.open .list .option.selected {
    color: #000 !important;
    background-color: #999 !important;
}

/* 悬停选项的样式 */
.nice-select .list .option:hover {
    color: #000 !important;
    background-color: #999 !important;
}

完整代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css" rel="stylesheet" />

<style>
.nice-select.open .list .option.selected {
    color: #000 !important;
    background-color: #999 !important;
}

.nice-select .list .option:hover {
    color: #000 !important;
    background-color: #999 !important;
}
</style>

<select class="drizy-custom-select" id="text-preview">
  <option value="text-preview-1" selected="">The quick brown fox jumps over a lazy dog</option>
  <option value="text-preview-2">Quizzical twins proved my hijack-bug fix</option>
  <option value="text-preview-3">Cozy sphinx waves quart jug of bad milk</option>
  <option value="text-preview-4">Fix problem quickly with galvanized jets</option>
  <option value="text-preview-5">Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp...</option>
</select>

<script>
jQuery(document).ready(function() {
  jQuery('select').niceSelect();
});
</script>

说明 #

插件默认在菜单展开（添加open类）时，对选中项的样式定义为.nice-select.open .list .option.selected，这个选择器比你原有的.nice-select .option.selected优先级更高，导致自定义样式被覆盖。通过使用与插件相同层级的选择器，配合!important强制生效，就能确保选中项在鼠标悬停其他选项时依然保留背景色。

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