オプションをホバリングすると色が変わります

Question

javascriptで選択し、そのオプションを配列で埋めました。その後、私はいくつかのjqueryを試して、その上にマウスを置いたときにオプションのbackgroundColorを変更しようとしましたが、何も動かないようです。オプションの上にカーソルを置くたびに、まだ青色に強調表示されています。

私はjavascriptとjqueryの新機能です。なぜこのようなことが起こったのかというアイデアです：選択肢に標準のホバー機能があり、いつも私をオーバーライドするか、間違いを見落としている可能性があります。 ？私はdiv要素に前に私のコードをテストし、コードはここに魔法のように

を働いていたので私のコード：

//arraycommObjName is an array with 4 elements to fill my selection 
//$('#commObjs') is my select 
for (i=0; i < arraycommObjName.length; i++) { 
    $('#commObjs').append($('<option class="testoptions"></option>').attr("value", arrayCommObjID[i]).text(arraycommObjName[i])); 
} 


$(".testoptions").hover(function(e) { 
    $(this).css("background-color",e.type === "mouseenter"?"green":"red") 
}) 

テイクノートはい、私はそれはCSSでこれを行う方が良いでしょう知っているが、それを行うために私に尋ねていますjavascriptとjqueryだけです。

Answer 1

select2を使用して、CSSを追加してデフォルトのスタイルを上書きすることができます。

以下は、デフォルトのselect2の白と青の色を上書きできることを証明するための、いくつかの恐ろしい色の例です。

$("#states").select2();

#states { 
 
    width: 300px; 
 
} 
 

 
.select2-results__option { 
 
    color: orange; 
 
    background-color: seashell; 
 
} 
 

 
.select2-results__option--highlighted { 
 
    color: white !important; 
 
    background-color: darkgreen !important; 
 
} 
 

 
.select2-container--default .select2-results__option[aria-selected=true] { 
 
    background-color: darkgray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 

 
<select id="states"> 
 
    <option value="">Select...</option> 
 
    <option value="AZ">Arizona</option> 
 
    <option value="CA">California</option> 
 
    <option value="CO">Colorado</option> 
 
    <option value="NV">Nevada</option> 
 
    <option value="OR">Oregon</option> 
 
    <option value="PA">Pennsylvania</option> 
 
    <option value="RI">Rhode Island</option> 
 
    <option value="SC">South Carolina</option> 
 
    <option value="VT">Vermont</option> 
 
    <option value="VA">Virginia</option> 
 
    <option value="WV">West Virginia</option> 
 
</select>