I’m using Nice Select, https://github.com/hernansartorio/jquery-nice-select.
How do I keep the background color of the selected option when I hover to another option? Because when I hover to another option, the background of the selected option disappears.
Here’s my code:
jQuery(document).ready(function() {
jQuery('select').niceSelect();
});.nice-select .option:hover,
.nice-select .option.selected {
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" />
<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>But it doesn’t work.
5
The .nice-select .list:hover .option:not(:hover) {background-color: transparent !important;} rule makes the problem. Try adding the overriding rule to the end of the document, like so:
jQuery(document).ready(function() {
jQuery('select').niceSelect();
});.nice-select .option:hover,
.nice-select .option.selected {
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" />
<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>
<style>
.nice-select .list:hover .option:not(:hover) {
background-color: red !important;
}
</style>2